请教一下，有人做过下拉框联动吗？

请教一下，有人做过下拉框联动吗？每选中一个跟上一一级绑定！不知道怎么写！需要用原生JS.

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

4条回答默认最新

Heerey525 前端领域新星创作者 2022-07-16 10:29

关注

https://www.jianshu.com/p/617db96b7905

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>二级联动下拉框</title>
  </head>

  <body>
    <div id="seleDiv">
      <select id="province" onchange="selectCity(this)">
        <option>--选择省市--</option>
        <option>北京市</option>
        <option>河北省</option>
        <option>辽宁省</option>
        <option>山东省</option>
      </select>

      <select id="city">
        <option>--选择城市--</option>
      </select>
    </div>
    <script>
    // 1.让用户先选择一个省份, 获取用户选中的省份 北京市
    // 2.根据用户选中的省份, 获知省份下面的所有城市(数组)
    // 3.将该省份下面的所有城市 作为option选项 填充到第二个select列表(城市)中
    // js实现注意问题: 
    // ie10以下的浏览器不支持 select,table上的innerHTML属性
    // 删除option时，由于删除后，options长度发生了变化，所以直接用for循环会有漏删的情况，可以由后向前删除，可以避免这样的问题
      var data = {
        北京市: ["海淀区", "朝阳区", "丰台区"],
        河北省: ["石家庄", "唐山", "秦皇岛"],
        辽宁省: ["沈阳", "大连", "鞍山"],
        山东省: ["青岛", "济南", "烟台"],
      };

      function selectCity(thisobj) {
        //1.先获取用户选中的省份
        var prov = thisobj.value;
        //2.根据省份获取省份对应的城市数据
        var citys = data[prov];
        //3.遍历数组中的城市，将城市变为option选项
        var citySele = document.getElementById("city");
        //在添加当前省份对应的城市到select框之前应该先清空其他成分的选项，再进行添加
        citySele.innerHTML = "<option>--选择城市--</option>";
        for (var i = 0; i < citys.length; i++) {
          var opt = document.createElement("option");
          opt.innerHTML = citys[i];
          //添加到第二个城市的下拉选框中
          citySele.appendChild(opt);
        }
      }
    </script>
  </body>
</html>