當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
二级联动，三级联动，初学者，纯javascript，不含jQuery
生活随笔
收集整理的這篇文章主要介紹了
二级联动，三级联动，初学者，纯javascript，不含jQuery
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
二級聯動：
html代碼：
1 <body> 2 <select id="province" onchange="getCity(this.options.selectedIndex)"> 3 <option>請選擇</option> 4 <option>廣東</option> 5 <option>廣西</option> 6 </select>省 7 <select id="city"> 8 <option>請選擇</option> 9 </select>市 10 </body>js代碼：
1 var citys=[ 2 ["廣州","佛山","深圳"], 3 ["柳州","桂林"] 4 ]; 5 function getCity(index){ 6 var city=document.getElementById('city'); 7 var showCity=citys[index-1]; 8 city.length=1; 9 for(var i=0;i<showCity.length;i++){ 10 city.options[i+1]=new Option(showCity[i]); 11 } 12 }三級聯動：
html代碼：
1 <body> 2 <select id="province" onchange="getCity()"> 3 <option>請選擇</option> 4 <option>廣東</option> 5 <option>廣西</option> 6 </select>省 7 <select id="city" onchange="getArea()"> 8 <option>請選擇</option> 9 </select>市 10 <select id="area"> 11 <option>請選擇</option> 12 </select>區 13 </body>js代碼：
1 var city = [ 2 ["廣州", "朝陽", "潮州", "汕頭"], 3 ["柳州", "桂林"] 4 ]; 5 var areaa = [ 6 [ 7 ["花都", "越秀", "荔灣", "天河", "海珠", "增城", "從化"], 8 ["雙塔", "龍城"], 9 ["湘橋", "潮安"], 10 ["龍湖", "濠江", "朝南", "澄海"] 11 ], 12 [ 13 ["柳江", "柳南", "柳北"], 14 ["疊彩", "秀峰", "七星", "雁山", "臨桂"] 15 ] 16 ]; 17 18 function getCity() { 19 var prov = document.getElementById("province"); 20 var ci = document.getElementById("city"); 21 var ar = document.getElementById('area'); 22 var provinceCity = city[prov.selectedIndex - 1]; 23 ci.length = 1; //為了處理數組切換時數據錯亂 24 if(prov.selectedIndex != 0) { 25 for(var i = 0; i < provinceCity.length; i++) { 26 ci[i + 1] = new Option(provinceCity[i]); 27 //以下寫法也可以 28 //ci.options[i+1]=new Option(provinceCity[i]); 29 } 30 } 31 ar.length = 1; 32 } 33 34 function getArea() { 35 var prov = document.getElementById("province"); 36 var ar = document.getElementById('area'); 37 var ci = document.getElementById("city"); 38 var provinceCityArea = areaa[prov.selectedIndex - 1][ci.selectedIndex - 1]; 39 ar.length = 1; //為了處理數組切換時數據錯亂 40 if(ci.selectedIndex != 0) { 41 for(var i = 0; i < provinceCityArea.length; i++) { 42 ar[i + 1] = new Option(provinceCityArea[i]); 43 } 44 } 45 46 }?
轉載于:https://www.cnblogs.com/Meiwah/p/10565458.html
總結
以上是生活随笔為你收集整理的二级联动，三级联动，初学者，纯javascript，不含jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20行以内python代码画出各种减压图
- 下一篇： maven私服 Nexus2.x.