JavaScript省份城市的三级联动

最新推荐文章于 2024-07-30 10:56:44 发布

逆游古河而上

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量929

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_67268069/article/details/128077103

版权

JavaScript省份城市的三级联动

使用JavaScript中变量（数组或对象）定义省份及对应的城市，应用Select标签对象，实现二级级联的下拉菜单选中效果。也就是说，在省份下拉菜单中，选中一个省份时，在城市下拉菜单中出现对应城市选择内容。效果如下：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meat charset="utf-8"></meat>
        <title>JavaScript省份城市的三级联动</title>
        
    </head>
    <body>
      
<h2>选择所在的省份及城市<br/><br/>
省份：<select id="province">
      <option value="-1">请选择</option>
      
    </select>
城市 <select id="city"></select>
</h2>

    <script>
      // 省份数组
      let provinceArr = ["北京","上海", "山东省", "甘肃省", "江苏", "河北"];
      //城市数组
      let cityArr = [
        ["北京市"],
        ["上海市"],
        ["济南市", "青岛市", "烟台市"],
        ["兰州", "白银", "天水","武威","金昌"],
        ["苏州市", "南京市", "扬州市"],
        ["石家庄", "秦皇岛", "张家口"],
      ];

      //给下拉菜单添加选项
      function createOption(select, arr){
        for (let inder in arr){
          let opt = new Option(arr[inder],inder);//创建一个下拉选项
          select.options.add(opt);//将选项添加到下拉列表中
        }
      }

      let province = document.getElementById("province");
      createOption(province, provinceArr);
      let city = document.getElementById("city");
      province.onchange = ()=>{
        //当前省份发生变化
        //清除原有城市下拉选项
        city.options.length = 0;
        createOption(city, cityArr[province.value]);
        //强制city刷新
        city.onchange();
      };

      let country = document.getElementById("country");
      city.onchange = () =>{
        //当城市发生变化，清除原有区域选项
        country.options.length = 0;
        createOption(country[province.value])
      };

    </script>
  </body>


    
</html>

逆游古河而上

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript省份城市的三级联动

使用JavaScript中变量（数组或对象）定义省份及对应的城市，应用Select标签对象，实现二级级联的下拉菜单选中效果。也就是说，在省份下拉菜单中，选中一个省份时，在城市下拉菜单中出现对应城市选择内容。
复制链接

扫一扫