如何重置三级关联级联Select下拉框的选中值？

嘿，我太懂你遇到的这个坑了！当用户先选了「书籍」里的某个选项，之后又回到第一个下拉框重新点选「书籍」，结果第二个下拉框要么没重置，要么还是停留在之前选中的条目，对吧？

这事儿的根源很简单：大多数情况下，下拉框的change事件只有在选中值发生变化时才会触发。如果用户重复选择同一个父选项（比如之前选了「书籍」，现在又点「书籍」），值没变化，change事件就不会触发，导致子下拉框的状态没被更新。

下面我给你几种不同技术栈的解决方案，按需取用就行：

一、原生JavaScript实现方案 #

把更新子下拉的逻辑抽成独立函数，同时绑定change和click事件（click能覆盖重复选同一选项的场景）：

// 获取下拉框元素
const firstSelect = document.getElementById('first-select');
const secondSelect = document.getElementById('second-select');

// 定义父选项与子选项的映射关系
const optionRelations = {
  'books': [
    { value: 'got', label: '《冰与火之歌》' },
    { value: 'clash', label: '《列王的纷争》' }
  ],
  'movies': [
    { value: 'django', label: '《被解救的姜戈》' },
    { value: 'pulp', label: '《低俗小说》' }
  ]
};

// 封装更新子下拉的核心函数
function refreshSecondDropdown(selectedParentValue) {
  // 清空现有选项
  secondSelect.innerHTML = '';
  
  // 添加默认提示项（可选，提升用户体验）
  const defaultOption = document.createElement('option');
  defaultOption.value = '';
  defaultOption.textContent = '请选择';
  secondSelect.appendChild(defaultOption);
  
  // 根据父选项添加对应子选项
  const targetOptions = optionRelations[selectedParentValue];
  if (targetOptions) {
    targetOptions.forEach(opt => {
      const newOption = document.createElement('option');
      newOption.value = opt.value;
      newOption.textContent = opt.label;
      secondSelect.appendChild(newOption);
    });
  }
  
  // 重置子下拉的选中状态
  secondSelect.selectedIndex = 0;
}

// 绑定change事件：值变化时更新子下拉
firstSelect.addEventListener('change', (e) => {
  refreshSecondDropdown(e.target.value);
});

// 绑定click事件：重复选同一父选项时强制更新
firstSelect.addEventListener('click', () => {
  refreshSecondDropdown(firstSelect.value);
});

二、jQuery实现方案 #

思路和原生JS一致，用jQuery简化DOM操作：

const optionRelations = {
  'books': [
    { value: 'got', label: '《冰与火之歌》' },
    { value: 'clash', label: '《列王的纷争》' }
  ],
  'movies': [
    { value: 'django', label: '《被解救的姜戈》' },
    { value: 'pulp', label: '《低俗小说》' }
  ]
};

function refreshSecondDropdown(selectedParentValue) {
  $('#second-select')
    .empty()
    .append('<option value="">请选择</option>')
    .append(
      optionRelations[selectedParentValue]?.map(opt => 
        `<option value="${opt.value}">${opt.label}</option>`
      ).join('')
    )
    .prop('selectedIndex', 0);
}

// 同时绑定change和click事件
$('#first-select')
  .on('change', function() {
    refreshSecondDropdown($(this).val());
  })
  .on('click', function() {
    refreshSecondDropdown($(this).val());
  });

三、Vue.js实现方案 #

Vue的响应式系统能帮我们省不少事，只需监听父选项的变化，同时处理重复选择的场景：

<template>
  <div class="cascade-select">
    <select v-model="selectedCategory" @click="resetSubSelect">
      <option value="">请选择分类</option>
      <option value="books">书籍</option>
      <option value="movies">电影</option>
    </select>
    
    <select v-model="selectedItem">
      <option value="">请选择项目</option>
      <option 
        v-for="item in currentSubItems" 
        :key="item.value" 
        :value="item.value"
      >
        {{ item.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      selectedItem: '',
      optionRelations: {
        books: [
          { value: 'got', label: '《冰与火之歌》' },
          { value: 'clash', label: '《列王的纷争》' }
        ],
        movies: [
          { value: 'django', label: '《被解救的姜戈》' },
          { value: 'pulp', label: '《低俗小说》' }
        ]
      }
    };
  },
  computed: {
    currentSubItems() {
      return this.optionRelations[this.selectedCategory] || [];
    }
  },
  methods: {
    resetSubSelect() {
      // 点击父下拉时，重置子下拉的选中状态
      this.selectedItem = '';
    }
  },
  watch: {
    selectedCategory() {
      // 父选项变化时，自动重置子下拉
      this.selectedItem = '';
    }
  }
};
</script>

核心总结 #

不管用哪种技术栈，核心思路都是：不要只依赖change事件，把更新子下拉的逻辑抽成独立函数，然后在能触发用户选择动作的事件（比如click）里也调用它，确保无论用户是否重复选择同一父选项，子下拉框都能被正确重置和更新。

内容的提问来源于stack exchange，提问作者aiden87