1、城市联动框
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>城市联动框</title> 6 </head> 7 <script type="text/javascript"> 8 function showCity(){ 9 //维护一个二维数组存储省份对应的城市 10 var citys=[[],["广州","深圳","佛山","中山","珠海","东莞"],["武汉","黄石","襄阳","孝感"],["南宁","桂林","贵港","柳州"]]; 11 //获取省对应的节点 12 var proviceNode=document.getElementById("provice"); 13 //获取省份选中的选项(城市) 14 var selectIndex=proviceNode.selectedIndex; 15 var cityDatas=citys[selectIndex]; 16 var cityNode=document.getElementById("city"); 17 //清空city框的所有option （注：这一步和下面“设置options的个数”作用效果相同） 18 /*var chridren=cityNode.childNodes; 19 for(var i=0;i<chridren.length;){ 20 cityNode.removeChild(chridren[i]); 21 }*/ 22 //设置options的个数。作用：当选择省份时，保证二维数组中只有对应的一个下标里的值 23 cityNode.options.length=1; 24 //遍历出选择的省份所对应的所有城市 25 for(var index=0;index<cityDatas.length;index++){ 26 var option=document.createElement("option"); 27 option.innerHTML=cityDatas[index]; 28 cityNode.appendChild(option); 29 } 30 } 31 </script> 32 <body> 33 省份:<select id="provice" onChange="showCity()"> 34 <option>省份</option> 35 <option>广东</option> 36 <option>湖北</option> 37 <option>广西</option> 38 </select> 39 城市:<select id="city"><option>城市</option></select> 40 </body> 41 </html>
效果图
|
原创作者：DSHORE 作者主页：http://www.cnblogs.com/dshore123/ 原文出自：https://www.cnblogs.com/dshore123/p/9529035.html 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |