JS-SELECT2：搜索时保留作为父级的禁用选项

嘿，这个需求我之前维护老系统的时候恰好碰到过！Select2默认的过滤逻辑会把禁用选项也一并筛掉，不过咱们可以通过重写它的matcher（匹配器）函数来完美解决，核心思路就是让所有禁用选项始终留在下拉列表里，同时正常过滤出匹配搜索词的非禁用选项。

具体实现步骤 #

1. 自定义Matcher函数 #

在初始化Select2时，替换默认的匹配逻辑，对禁用和非禁用选项分开处理：

$('select').select2({
  matcher: function(params, data) {
    // 没有搜索词时，直接返回所有原始选项
    if ($.trim(params.term) === '') {
      return data;
    }

    // 关键逻辑：如果是禁用选项，直接保留，不参与过滤
    if (data.disabled) {
      return data;
    }

    // 非禁用选项，沿用Select2默认的匹配逻辑筛选
    const originalMatcher = $.fn.select2.defaults.defaults.matcher;
    return originalMatcher(params, data);
  }
});

2. 适配你的嵌套结构 #

假设你的HTML是用禁用选项作为父级标签的结构，比如这样：

<select id="nested-select">
  <option disabled>产品大类A</option>
  <option value="a1">A类子产品1</option>
  <option value="a2">A类子产品2</option>
  <option disabled>产品大类B</option>
  <option value="b1">B类子产品1</option>
  <option value="b2">B类子产品2</option>
  <option disabled>产品大类C</option>
  <option value="c1">C类子产品1</option>
</select>

当你在搜索框输入“B类”时，下拉列表会同时显示所有禁用的父级选项（产品大类A、B、C），以及匹配的非禁用选项（B类子产品1、B类子产品2），完全符合你的需求。

额外注意事项 #

• 如果你的Select2版本比较老旧（比如v4.0之前），matcher函数的参数格式可能略有差异，但核心逻辑不变——只要判断data.disabled为true就直接返回该选项。
• 这个方案会自动保留父级与子选项的原有层级顺序，不会因为过滤打乱结构。

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