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

时间：2023-03-08 18:48:44
java基础68 JavaScript城市联动框（网页知识）

1、城市联动框

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>城市联动框</title>

 </head>

 <script type="text/javascript">

     function showCity(){

         //维护一个二维数组存储省份对应的城市

         var citys=[[],["广州","深圳","佛山","中山","珠海","东莞"],["武汉","黄石","襄阳","孝感"],["南宁","桂林","贵港","柳州"]];

         //获取省对应的节点

         var proviceNode=document.getElementById("provice");

         //获取省份选中的选项(城市)

         var selectIndex=proviceNode.selectedIndex;

         var cityDatas=citys[selectIndex];

         var cityNode=document.getElementById("city");

         //清空city框的所有option   （注：这一步和下面“设置options的个数”作用效果相同）

         /*var chridren=cityNode.childNodes;

         for(var i=0;i<chridren.length;){

             cityNode.removeChild(chridren[i]);

         }*/

         //设置options的个数。作用：当选择省份时，保证二维数组中只有对应的一个下标里的值

         cityNode.options.length=1;

         //遍历出选择的省份所对应的所有城市

         for(var index=0;index<cityDatas.length;index++){

             var option=document.createElement("option");

             option.innerHTML=cityDatas[index];

             cityNode.appendChild(option);

         }

     }

 </script>

 <body>

     省份:<select id="provice" onChange="showCity()">

         <option>省份</option>

         <option>广东</option>

         <option>湖北</option>

         <option>广西</option>

     </select>&nbsp;&nbsp;&nbsp;

     城市:<select id="city"><option>城市</option></select>

 </body>

 </html>

效果图

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

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9529035.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！）

相关文章