JavaScript实现二级联动菜单示例

// JavaScript代码示例
// 定义省份和城市的数据
var provinces = ["广东省", "湖南省", "四川省"];
var cities = {
  "广东省": ["广州市", "深圳市", "珠海市"],
  "湖南省": ["长沙市", "岳阳市", "株洲市"],
  "四川省": ["成都市", "绵阳市", "乐山市"]
};

// 获取省份下拉框和城市下拉框的 DOM 元素
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");

// 初始化省份下拉框的选项
for (var i = 0; i < provinces.length; i++) {
  var option = document.createElement("option");
  option.text = provinces[i];
  provinceSelect.add(option);
}

// 给省份下拉框添加事件监听器
provinceSelect.addEventListener("change", function() {
  // 获取当前选中的省份
  var province = provinceSelect.value;

  // 根据当前选中的省份更新城市下拉框的选项
  citySelect.options.length = 0;
  var citiesOfSelectedProvince = cities[province];
  for (var i = 0; i < citiesOfSelectedProvince.length; i++) {
    var option = document.createElement("option");
    option.text = citiesOfSelectedProvince[i];
    citySelect.add(option);
  }
});