如何隐藏Chosen组件中以短横线开头的li元素

我在用Chosen库实现带自动填充的父子层级下拉选择列表，需要隐藏ul.chosen-results下所有文本以短横线-开头的子级<li>元素，保留父级项。现有代码在节点预览模式下有效，但节点编辑模式下完全不起作用，尝试用ajaxComplete方法也没解决。

HTML结构示例 #

<ul class="chosen-results">
  <!-- 需隐藏的子级li -->
  <li class="active-result" data-option-array-index="4">-General Discussion</li>
  <!-- 需保留的父级li -->
  <li class="active-result" data-option-array-index="0">Accident Prevention</li>
</ul>

现有预览有效代码 #

(function ($) {
  $(document).ready(function () {
    $("ul.chosen-results li").each(function () {
      if ($(this).text().charAt(0) === '-') {
        $(this).hide();
      }
    });
  });
})(jQuery);

尝试过的无效ajaxComplete代码 #

(function ($) {
  $(document).ajaxComplete(function() {
    $("ul.chosen-results li").each(function () {
      if ($(this).text().charAt(0) === '-') {
        $(this).hide();
      }
    });
  });
})(jQuery);

核心原因 #

编辑模式下，Chosen下拉列表的DOM元素是动态渲染的，时机晚于document.ready；而全局ajaxComplete监听无法精准匹配Chosen的渲染触发逻辑，导致代码执行时目标元素还没生成，自然无效。

方案一：绑定Chosen原生事件（推荐） #

Chosen提供了chosen:ready（初始化完成）和chosen:updated（选项更新）两个专属事件，能精准捕获下拉列表的渲染时机：

(function ($) {
  // 封装隐藏逻辑，避免重复代码
  function hideChildChosenItems() {
    $("ul.chosen-results li.active-result").each(function () {
      // 先去除文本首尾空格，避免换行/空格干扰首字符判断
      const itemText = $(this).text().trim();
      if (itemText.charAt(0) === '-') {
        $(this).hide();
      }
    });
  }

  $(document).ready(function () {
    // 处理页面加载时已存在的Chosen下拉
    hideChildChosenItems();

    // 绑定Chosen专属事件，监听动态生成/更新的下拉
    $(".chosen-select").on("chosen:ready chosen:updated", function () {
      hideChildChosenItems();
    });
  });
})(jQuery);

说明：

• 选择器加上.active-result，精准匹配Chosen的有效选项，避免误操作搜索无结果提示等特殊li元素；
• 用trim()处理文本，解决HTML中换行/空格导致首字符判断错误的问题；
• 绑定chosen:updated事件，覆盖编辑模式下选项动态更新的场景。

方案二：监听DOM变化（兼容极端动态场景） #

如果编辑模式下Chosen下拉是完全动态新增到页面的，可使用MutationObserver监听DOM变化，实时处理新增的子级项：

(function ($) {
  $(document).ready(function () {
    // 创建DOM变化观察者
    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        // 仅处理新增的节点
        if (mutation.addedNodes.length > 0) {
          $(mutation.addedNodes).filter("li.active-result").each(function () {
            const itemText = $(this).text().trim();
            if (itemText.charAt(0) === '-') {
              $(this).hide();
            }
          });
        }
      });
    });

    // 配置观察规则：监听子元素变化
    const observeConfig = { childList: true, subtree: true };

    // 对已存在的chosen-results开始观察
    $("ul.chosen-results").each(function () {
      observer.observe(this, observeConfig);
    });

    // 监听页面中新增的chosen-results元素
    $(document).on("DOMNodeInserted", function (e) {
      const $target = $(e.target);
      if ($target.is("ul.chosen-results")) {
        observer.observe($target[0], observeConfig);
        // 处理已存在的子元素
        $target.find("li.active-result").each(function () {
          const itemText = $(this).text().trim();
          if (itemText.charAt(0) === '-') {
            $(this).hide();
          }
        });
      }
    });
  });
})(jQuery);

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