您好,登錄后才能下訂單哦!
這篇文章主要介紹了JS三級(jí)聯(lián)動(dòng)代碼格式實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
實(shí)現(xiàn)js多級(jí)聯(lián)動(dòng)的代碼格式
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> 省份<select id="pro" onchange="getcity()"> <!--創(chuàng)造三個(gè)下拉選項(xiàng)欄--> <option>選擇省份</option> </select> 城市<select id="city" onchange="getarea()"> <option>選擇城市</option> </select> 區(qū)<select id="area"> <option>選擇區(qū)</option> </select> </body> </html> <script type="text/javascript"> var sheng = ["湖北省", "湖南省", "廣東省"]; var city = [["武漢市", "宜昌市", "咸寧市"], ["長(zhǎng)沙市", "常德市", "邵陽(yáng)市"], ["廣州市", "深圳市", "惠州市"]] var ar = [[["武昌區(qū)", "洪山區(qū)"], ["夷陵區(qū)"], ["咸安區(qū)"]], [["芙蓉區(qū)"], ["鼎城區(qū)"], ["雙清區(qū)"]], [["荔灣區(qū)"], ["福田區(qū)"], ["惠陽(yáng)區(qū)"]]] window.onload = start; var s = document.getElementById("pro"); //設(shè)置初始的省份選項(xiàng) function start() { for (var i = 0; i < sheng.length; i++) { var op = document.createElement("option"); op.innerHTML = sheng[i]; s.appendChild(op); //添加幾個(gè)可選擇的省份到第一個(gè)選項(xiàng)下拉欄 } } var c = document.getElementById("city") function getcity() { c.length = 1; var sw = s.selectedIndex;//找到省份位置,從而好使后面的城市與省份對(duì)應(yīng) var citys = city[sw - 1]; for (var j = 0; j < citys.length; j++) { var op1 = document.createElement("option"); op1.innerHTML = citys[j]; c.appendChild(op1); } } var a = document.getElementById("area") function getarea() { a.length = 1; var sw = s.selectedIndex;//省份位置,與上一步中的sw一樣 var cw = c.selectedIndex;//城市位置 var citys = ar[sw - 1];//先把三維數(shù)組中的區(qū)域找出來(lái),確定是哪個(gè)省里的幾個(gè)區(qū) var ars = citys[cw - 1];//再w位置,把對(duì)應(yīng)的區(qū)對(duì)應(yīng)給相應(yīng)的城市 for (var k = 0; k < ars.length; k++) { var op2 = document.createElement("option"); op2.innerHTML = ars[k]; a.appendChild(op2); } } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。