废鸡程序员 2022-07-15 17:53 采纳率: 86%
浏览 46
已结题

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

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

img

  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 7月26日
  • 已采纳回答 7月18日
  • 创建了问题 7月15日

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。