如何实现基于前置下拉菜单值过滤的二级下拉菜单？

以下是几种常见的实现方案，核心逻辑都是监听第一个下拉的选择变化，动态更新第二个下拉的选项：

原生JavaScript实现 #

1. HTML结构 #

<!-- 分类下拉菜单 -->
<select id="categorySelect">
  <option value="">请选择分类</option>
  <option value="legumes（豆类）">legumes（豆类）</option>
  <option value="fruits（水果）">fruits（水果）</option>
</select>

<!-- 子选项下拉菜单，初始禁用 -->
<select id="itemSelect" disabled>
  <option value="">请先选择分类</option>
</select>

2. JavaScript逻辑 #

// 定义分类与对应子选项的映射数据
const categoryOptions = {
  "legumes（豆类）": ["黄豆", "绿豆", "黑豆"],
  "fruits（水果）": ["苹果", "香蕉", "橙子"]
};

// 获取下拉元素
const categorySelect = document.getElementById('categorySelect');
const itemSelect = document.getElementById('itemSelect');

// 监听分类下拉的选择变化
categorySelect.addEventListener('change', function() {
  // 清空子下拉的现有选项
  itemSelect.innerHTML = '<option value="">请选择具体选项</option>';
  const selectedCategory = this.value;

  if (selectedCategory) {
    // 启用子下拉菜单
    itemSelect.disabled = false;
    // 遍历对应分类的子选项，添加到子下拉中
    categoryOptions[selectedCategory].forEach(item => {
      const option = document.createElement('option');
      option.value = item;
      option.textContent = item;
      itemSelect.appendChild(option);
    });
  } else {
    // 未选择分类时，禁用子下拉
    itemSelect.disabled = true;
  }
});

jQuery实现 #

如果项目中使用jQuery，可以简化DOM操作：

<select id="categorySelect">
  <option value="">请选择分类</option>
  <option value="legumes（豆类）">legumes（豆类）</option>
  <option value="fruits（水果）">fruits（水果）</option>
</select>

<select id="itemSelect" disabled>
  <option value="">请先选择分类</option>
</select>

<script src="jquery.min.js"></script>
<script>
const categoryOptions = {
  "legumes（豆类）": ["黄豆", "绿豆", "黑豆"],
  "fruits（水果）": ["苹果", "香蕉", "橙子"]
};

// 监听分类下拉变化
$('#categorySelect').on('change', function() {
  const selectedCategory = $(this).val();
  const $itemSelect = $('#itemSelect');

  // 重置子下拉
  $itemSelect.html('<option value="">请选择具体选项</option>');

  if (selectedCategory) {
    $itemSelect.prop('disabled', false);
    // 批量添加子选项
    $.each(categoryOptions[selectedCategory], function(_, item) {
      $itemSelect.append(`<option value="${item}">${item}</option>`);
    });
  } else {
    $itemSelect.prop('disabled', true);
  }
});
</script>

Vue.js实现（现代前端场景） #

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">请选择分类</option>
      <option value="legumes（豆类）">legumes（豆类）</option>
      <option value="fruits（水果）">fruits（水果）</option>
    </select>

    <select v-model="selectedItem" :disabled="!selectedCategory">
      <option value="">请选择具体选项</option>
      <option v-for="item in filteredItems" :key="item" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      selectedItem: '',
      categoryOptions: {
        "legumes（豆类）": ["黄豆", "绿豆", "黑豆"],
        "fruits（水果）": ["苹果", "香蕉", "橙子"]
      }
    };
  },
  computed: {
    // 计算属性自动筛选子选项
    filteredItems() {
      return this.selectedCategory ? this.categoryOptions[this.selectedCategory] : [];
    }
  }
};
</script>

核心思路 #

所有方案的本质都是：

1. 预先定义分类-子选项的映射关系
2. 监听第一个下拉菜单的change事件
3. 根据选中的分类值，筛选出对应的子选项列表
4. 更新第二个下拉菜单的选项，并控制其启用/禁用状态

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