您的位置：首页 > Web前端 > JavaScript

java基础68 JavaScript城市联动框（网页知识）

2018-08-24 12:10 447 查看

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>&nbsp;&nbsp;&nbsp;
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

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航