Angular中如何根据第一个下拉框的选择过滤第二个下拉框？

看起来你已经用上了Select2插件来做下拉框，需求是加载所有子分类后，根据选中的父分类动态显示匹配的子分类（子分类的ParentId等于父分类的Id），我给你梳理一套可行的实现方案：

第一步：完善HTML结构 #

首先确保你的子分类下拉框里，每个选项都带有对应父分类ID的标识（比如用data-parent-id属性），这样前端可以轻松匹配：

<!-- Category -->
<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Category:</label>
  <div class="col-xs-9">
    <select id="category" class="form-control select2" style="width: 100%;">
      <!-- 这里是你的分类选项，示例如下 -->
      <option value="1">Electronics</option>
      <option value="2">Home Goods</option>
    </select>
  </div>
</div>

<!-- Subcategory -->
<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Subcategory:</label>
  <div class="col-xs-9">
    <select id="subcategory" class="form-control select2" style="width: 100%;">
      <!-- 所有子分类选项，每个都带data-parent-id关联父分类ID -->
      <option value="101" data-parent-id="1">Smartphone</option>
      <option value="102" data-parent-id="1">Laptop</option>
      <option value="201" data-parent-id="2">Sofa</option>
      <option value="202" data-parent-id="2">Coffee Table</option>
    </select>
  </div>
</div>

第二步：编写联动逻辑（jQuery + Select2） #

因为Select2是基于DOM的插件，直接隐藏/显示option不会自动更新下拉列表，所以我们需要手动过滤并重新初始化Select2的数据源：

$(document).ready(function() {
  // 初始化两个Select2控件
  $('#category, #subcategory').select2();

  // 页面加载完成后，先根据默认选中的分类过滤子分类
  filterSubcategories($('#category').val());

  // 监听分类下拉框的变化事件
  $('#category').on('change', function() {
    const selectedCatId = $(this).val();
    filterSubcategories(selectedCatId);
  });

  // 核心过滤函数
  function filterSubcategories(targetCatId) {
    const $subCatSelect = $('#subcategory');
    const allSubCatOptions = $subCatSelect.find('option');

    // 遍历所有子分类选项，显示匹配父ID的，隐藏不匹配的
    allSubCatOptions.each(function() {
      const optionParentId = $(this).data('parent-id');
      if (optionParentId == targetCatId) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });

    // 重新构造Select2的数据源并刷新
    $subCatSelect.val(null).trigger('change'); // 清空之前的选中值
    $subCatSelect.select2({
      data: allSubCatOptions.filter(':visible').map(function() {
        return {
          id: $(this).val(),
          text: $(this).text()
        };
      }).get()
    });
  }
});

关键说明 #

1. data-parent-id属性：这是连接父分类和子分类的关键，确保每个子分类选项都正确绑定对应的父分类ID。
2. 初始化过滤：页面加载时就执行一次过滤，避免初始状态下子分类显示全部选项。
3. Select2数据源更新：因为Select2会缓存初始的选项列表，所以过滤后需要重新生成符合条件的数据源并刷新控件，才能让用户看到正确的选项。
4. 清空选中值：每次切换分类时清空子分类的选中值，防止出现选中了不属于当前分类的子分类的情况。

如果你的子分类是通过后端接口一次性加载的，这套方案完全适用；如果是需要动态从后端获取，那可以把过滤逻辑改成AJAX请求，但你提到“加载所有子分类”，所以前端本地过滤是最高效的方式。

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