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

Posted 2023-05-08

【中文标题】选择的插件 - 在 .trigger("chosen:updated") 之后删除特定选项的“x”按钮（删除选项）

【英文标题】：Chosen plugin - remove "x" button (remove option) for specific options after .trigger("chosen:updated")

【发布时间】：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();
        );
            
);

【参考方案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 +")";