选择的插件 - 在 .trigger("chosen:updated") 之后删除特定选项的“x”按钮（删除选项）答案

【问题标题】：Chosen plugin - remove "x" button (remove option) for specific options after .trigger("chosen:updated")选择的插件 - 在 .trigger("chosen:updated") 之后删除特定选项的“x”按钮（删除选项）
【发布时间】：2021-10-19 03:32:29
【问题描述】：

使用：jQuery 3.5.1

基本上我有多个 DDLists，由服务器（ASP MVC 应用程序）呈现，带有 selected=true 或 false 选项，我选择附加到它们，selected 选项（由服务器呈现）不应该被删除所以我从他们身上删除了“x”按钮。我现在想要的是这样的：

当我从这些 DDL 中选择一个选项时，我希望该选项不适用于其余 DDL，如果我删除它 -> 再次可用于所有 DDL -> 我已经设法做到了使用.trigger("chosen:updated") 工作（使用下面的代码）
执行.trigger("chosen:updated")，更新我所有的 DDL，其中隐式添加“x”按钮到所有选定的选项
现在我需要的是一种防止将“x”按钮添加到最初由服务器呈现的选项的方法 -> 我试图将它们保存在 search_choices 但此时它们不包含“x " 按钮，在.trigger("chosen:updated") 之后，DOM 被更改，search_choices 包含这些元素的旧版本。

现在使用 ".selector" 弃用了一个解决方案 -> 它为您提供了 DOM 元素的更新版本

我该如何克服这个问题？提前致谢！

   var search_choices = $("#MyFieldset").find(".search-choice");

   $("#step_5").on("change", ".ChosenDDLs", function (ev, crtSelectedOptionVal) {
    
    var all_ChosenDDLs = $(".ChosenDDLs");

    if (crtSelectedOptionVal.deselected) {
        all_ChosenDDLs .not(this).each(function (index, elem) {
            $(elem).children("option[value=" + crtSelectedOptionVal.deselected + "]")
                   .prop("disabled", false)
                   .trigger("chosen:updated");
        });
    }
    else if (crtSelectedOptionVal.selected) {
        all_ChosenDDLs .not(this).each(function (index, elem) {
            $(elem).children("option[value=" + crtSelectedOptionVal.selected + "]")
                   .prop("disabled", true)
                   .trigger("chosen:updated");
        });
    }

///search_choices here does not contain updated DOM elemets, so code below doesn't work
    if (search_choices.length > 0) {
        search_choices.each(function (index, elem) {
            $(this).find(".search-choice-close").remove();
        });
    }        
});

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-chosen

【解决方案1】：

所以我实际上所做的是将这些选项呈现为禁用（从服务器），因此没有附加“x”按钮，并且还强制 jQuery 验证不忽略禁用的选项：:disabled:not(option)

$("#form").data("validator").settings.ignore = ":disabled:not(option)";

同样选择你不需要忽略隐藏的select，所以验证可以工作（重新解析验证后：$.validator.unobtrusive.parse($("#form"))）

$("#form").data("validator").settings.ignore = ":hidden:not(" + selectClassnameToIgnore +")";

【讨论】：