python前端基础--二级联动

最新推荐文章于 2022-09-11 09:49:02 发布

白杨树~

最新推荐文章于 2022-09-11 09:49:02 发布

阅读量976

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/qq_42336700/article/details/82082799

版权

html 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>省市级二级联动</title>
   </head>
   <body>
       
       <select id="province" οnchange="show()">
           <option >--省份--</option>
           <option value="">陕西</option>
           <option value="">河南</option>
           <option value="">山西</option>
       </select>
       <select id="city">
           <option value="">--城市--</option>
       </select>
   </body>
   <script type="text/javascript">

       //需求:根据用户选择的省份，去动态生成该省对应的城市
       //即：省份的变化，对应的城市也发生变化

       //1、你得知道用户选的是哪个省
       var provice=document.getElementById("province");
       //2、定位到对应的市集合
       var mycity = document.getElementById("city");
       var city = [
           [],["西安", "咸阳", "宝鸡", "汉中", "渭南", "安康", "商洛", "铜川"],["南阳","安阳","信阳","洛阳","商丘"],
           ["运城", "太原", "晋城", "长治"]
       ];
       //3、动态的添加标签
       function show() {
           //(1)首先清空select中原来的城市(遗留问题)
           mycity.innerHTML = "<option>--城市--</option>"; //方式1
           //(2)每一个下拉框都有一个对应的编号，selectedIndex属性设置或返回下拉列表中被选项目的索引号(从0开始)
           var index = provice.selectedIndex;
           //(3)通过索引遍历二维数组中的一维数组--定位到当前选择的省份
           var citys = city[index];
           //(4)将该省份对应的城市动态的增加到selest中(通过innerHTML的形式)
           for(var i = 0; i < citys.length; i++) {
//这里没有采用循环创建标签的形式，太麻烦
               mycity.innerHTML += "<option>" + citys[i] + "</option>";
           }

       }
   </script>
</html>