js下拉列表二级联动

点击查看代码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二级联动</title>
    <style>
      select {
        width: 150px;
        height: 40px;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <!-- 
        整体思路:根据前面的值来填充后面的下拉框
     -->
    <select id="provinces">
      <option value="henan">河南</option>
      <option value="hebei">河北</option>
      <option value="beijing">北京</option>
    </select>
    <select id="city">
      <option>郑州</option>
      <option>驻马店</option>
      <option>信阳</option>
    </select>
    <script>
      // 给省份绑定内容改变事件,内容改变时获得下拉框的值
      var provinces = document.getElementById("provinces");
      var city = document.getElementById("city");
      provinces.onchange = function () {
        var value = provinces.value;
        // 判断对应的省份,给城市下拉框中设置option
        if (value == "henan") {
          city.innerHTML =
            "<option>郑州</option>" +
            "<option>驻马店</option>" +
            "<option>周口</option>" +
            "<option>商丘</option>" +
            "<option>信阳</option>";
        } else if (value == "hebei") {
          city.innerHTML =
            "<option>石家庄</option>" +
            "<option>唐山</option>" +
            "<option>张家口</option>" +
            "<option>承德</option>" +
            "<option>廊坊</option>";
        } else if (value == "beijing") {
          city.innerHTML =
            "<option>朝阳区</option>" +
            "<option>海淀区</option>" +
            "<option>东城区</option>" +
            "<option>西城区</option>" +
            "<option>大兴</option>";
        }
      };
    </script>
  </body>
</html>
posted @ 2022-11-14 19:33  万能的冰  阅读(315)  评论(0)    收藏  举报