html二级联动下拉代码

HTML二级联动下拉代码是一种常见的前端开发技术，它可以用来实现页面中两个下拉框之间的关联，即第一个下拉框的选择会影响第二个下拉框的数据。下面是一个例子：

select id="select1" onchange="change()">
      option value="">
    请选择/option>
      option value="北京市">
    北京市/option>
      option value="上海市">
    上海市/option>
      option value="广州市">
    广州市/option>
      option value="深圳市">
    深圳市/option>
    /select>
    select id="select2">
      option value="">
    请选择/option>
    /select>
    script>
function change() {
      var select1 = document.getElementById("select1");
      var select2 = document.getElementById("select2");
      select2.innerHTML = "";
 // 清空第二个下拉框的内容  if (select1.value == "北京市") {
        var options = ["东城区", "西城区", "海淀区", "朝阳区"];
  }
 else if (select1.value == "上海市") {
        var options = ["黄浦区", "徐汇区", "静安区", "长宁区"];
  }
 else if (select1.value == "广州市") {
        var options = ["越秀区", "天河区", "海珠区", "番禺区"];
  }
 else if (select1.value == "深圳市") {
        var options = ["福田区", "罗湖区", "南山区", "宝安区"];
  }
      for (var i = 0;
     i " + options[i] + "/option>
    ";
  }
}
    /script>
    

在这个例子中，第一个下拉框中有几个选项，分别代表不同的城市。当用户选择其中一个城市时，第二个下拉框中的选项会相应地改变，只显示该城市下的区县名称。这个过程是通过JavaScript实现的，具体就是通过onchange事件来监听第一个下拉框的选择，然后根据选择的值动态生成第二个下拉框的选项。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！