javascript实现二级联动列表

最新推荐文章于 2022-04-13 21:34:12 发布

bestadc

最新推荐文章于 2022-04-13 21:34:12 发布

阅读量425

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/bestadc/article/details/116723485

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

javascript实现二级联动列表

<!DOCTYPE HTML>
<html>
<head>
  <title>二级联动列表</title>
  <meta charset="utf-8" />
  <style>
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <select name="provs">
    <!-- selectedIndex=0 -->
    <option>—选择省—</option>
    <!-- selectedIndex=1 -->
    <option>北京市</option>
    <option>天津市</option>
    <option>河北省</option>
  </select>
  <!-- 市 -->
  <select name="cities" class="hide">
  </select>
  <script>
    /*实现“省”和“市”的级联下拉列表*/
    var cities = [
      //北京
      [{ "name": '东城区', "value": 101 },
      { "name": '西城区', "value": 102 },
      { "name": '海淀区', "value": 103 },
      { "name": '朝阳区', "value": 104 }],
      //天津
      [{ "name": '河东区', "value": 201 },
      { "name": '河西区', "value": 202 },
      { "name": '南开区', "value": 303 }],
      //河北
      [{ "name": '石家庄市', "value": 301 },
      { "name": '廊坊市', "value": 302 },
      { "name": '保定市', "value": 303 },
      { "name": '唐山市', "value": 304 },
      { "name": '秦皇岛市', "value": 304 }]
    ];
    //获取触发事件的元素 "省份"
    var provs=document.getElementsByName("provs")[0];
    //绑定事件处理函数,onchange:当前元素的change事件的事件处理函数,事件改变触发
    provs.onchange=function(){
      //获取要修改的元素,就是"市"
      var city=document.getElementsByName("cities")[0];
      //如果点击选择省,把选择市隐藏
      if(this.selectedIndex==0){
        city.className="hide";
        return;
      }
      //点击不同省时,把上一个省留在市里的option清空
      city.innerHTML="";
      //selectedIndex:获取select子元素下标,减1变对应数组下标
      var i=this.selectedIndex-1;
      //创建文档片段对象frag,别问这是什么,问就是爱过
      var frag=document.createDocumentFragment();
      //在选择市的开头插入-选择市-
      var option=document.createElement("option");
      option.innerHTML="-选择市-";
      frag.appendChild(option);
      //遍历省对应的市插入市的select中
      //cities[i]是下标为数字的数组,建议使用for of
      for(var ct of cities[i]){
        var option=document.createElement("option");
        option.innerHTML=ct.name;
        frag.appendChild(option);
      }
      city.appendChild(frag);
      //如果事件触发,市显示,不隐藏
      city.className="";
    }
  </script>
</body>

</html>

bestadc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现二级联动列表

javascript实现二级联动列表<!DOCTYPE HTML><html><head> <title>二级联动列表</title> <meta charset="utf-8" /> <style> .hide { display: none; } </style></head><body> <select name="pr
复制链接

扫一扫

专栏目录