JavaScript如何实现下拉菜单联动动态切换关联选项值

下拉菜单联动指的是当第一个下拉菜单的选项发生变化时，第二个及后续关联的下拉菜单会自动更新可选内容，这种交互在表单填写场景中非常实用，比如地址选择、分类筛选等场景都会用到。实现这个效果的核心是通过JavaScript监听第一个下拉菜单的change事件，根据选中的值动态生成后续下拉菜单的选项内容。

基础HTML结构搭建

首先需要准备两个关联的下拉菜单，第一个是父级菜单，第二个是子级菜单，初始时子级菜单可以为空或者只有默认提示选项。

<div class="select-group">
  <label for="province">选择省份：</label>
  <select id="province">
    <option value="">请选择省份</option>
    <option value="gd">广东省</option>
    <option value="zj">浙江省</option>
    <option value="js">江苏省</option>
  </select>
</div>
<div class="select-group">
  <label for="city">选择城市：</label>
  <select id="city">
    <option value="">请先选择省份</option>
  </select>
</div>

关联数据准备

需要提前准备好父级选项和子级选项的对应关系数据，这里用一个对象来存储，键是父级下拉菜单的value值，值是对应的子级选项数组。

// 省份对应的城市数据
const cityData = {
  gd: [
    { value: 'gz', text: '广州市' },
    { value: 'sz', text: '深圳市' },
    { value: 'dg', text: '东莞市' }
  ],
  zj: [
    { value: 'hz', text: '杭州市' },
    { value: 'nb', text: '宁波市' },
    { value: 'wj', text: '温州市' }
  ],
  js: [
    { value: 'nj', text: '南京市' },
    { value: 'sz', text: '苏州市' },
    { value: 'wx', text: '无锡市' }
  ]
};

JavaScript核心逻辑实现

接下来编写JavaScript代码，主要步骤是获取两个下拉菜单元素，给父级菜单绑定change事件，在事件触发时清空子级菜单原有选项，再根据选中的父级值从数据中提取对应的子级选项，动态插入到子级菜单中。

// 获取DOM元素
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');

// 监听省份下拉菜单的变化事件
provinceSelect.addEventListener('change', function() {
  // 获取当前选中的省份value
  const selectedProvince = this.value;
  // 清空城市下拉菜单的原有选项
  citySelect.innerHTML = '';
  // 添加默认提示选项
  const defaultOption = document.createElement('option');
  defaultOption.value = '';
  defaultOption.textContent = '请选择城市';
  citySelect.appendChild(defaultOption);

  // 如果选中了有效省份，才添加对应的城市选项
  if (selectedProvince && cityData[selectedProvince]) {
    const cityList = cityData[selectedProvince];
    cityList.forEach(city => {
      const option = document.createElement('option');
      option.value = city.value;
      option.textContent = city.text;
      citySelect.appendChild(option);
    });
  } else {
    // 未选中有效省份时，更新默认提示
    defaultOption.textContent = '请先选择省份';
  }
});

多层级联动扩展

如果需要实现三级及以上的下拉菜单联动，只需要在现有逻辑基础上再增加一层监听即可。比如增加区县下拉菜单，监听城市下拉菜单的change事件，根据选中的城市值动态加载对应的区县选项，实现思路和两级联动完全一致。

注意事项

• 动态生成选项时，需要先清空子级菜单的原有内容，避免出现选项重复的问题
• 如果数据是从后端接口动态获取的，只需要在change事件触发时发送请求获取数据，再渲染选项即可，不需要提前准备本地数据
• 如果下拉菜单是动态生成的，需要使用事件委托来绑定change事件，确保新生成的元素也能触发联动逻辑
• 选项的值和显示文本最好分开设置，value用于存储实际提交的值，text用于用户可见的展示内容

JavaScript下拉菜单联动动态切换选项前端交互修改时间：2026-07-13 23:03:23