如何隐藏(不删除)select2 中的选项?

Posted

技术标签:

【中文标题】如何隐藏(不删除)select2 中的选项?【英文标题】:How to hide (NOT remove) option in select2? 【发布时间】:2016-01-02 02:04:54 【问题描述】:

是否可以在不删除的情况下隐藏 select2 中的选项?

我当前的代码只禁用了该选项:

$('#company_id').change(function () 
    var company_name =  $("#company_id option:selected").text();
    var $owner_id = $("#owner_id");

    $owner_id.select2("destroy"); 

    $("#owner_id option:not(:contains('(" + company_name + ")'))")  
        .prop('disabled',true);

    $("#owner_id option:contains('(" + company_name + ")')")
        .prop('disabled',false);

    $owner_id.select2();
);

【问题讨论】:

***.com/questions/25064487/… 【参考方案1】:

您可以使用 jQuery 注释 html 代码,您的代码将如下所示:

$('#company_id').change(function () 
    var company_name =  $("#company_id option:selected").text();
    var $owner_id = $("#owner_id");

    $owner_id.select2("destroy"); 

    //Comment element
    element = $("#owner_id option:not(:contains('(" + company_name + ")'))");
    comment = document.createComment(element.get(0).outerHTML);
    element.replaceWith(comment);

    //Unomment element
    $("#owner_id option:contains('(" + company_name + ")')").replaceWith(comment.nodeValue);

    $owner_id.select2();
);

如果不起作用,请尝试在循环中为每个元素进行注释或取消注释,我稍后会尝试。

【讨论】:

【参考方案2】:

使用 css 代替 prop

.css('display', 'none');

.css('display', 'block');

【讨论】:

以上是关于如何隐藏(不删除)select2 中的选项?的主要内容,如果未能解决你的问题,请参考以下文章

隐藏select2中的选定项目

Select2:动态隐藏某些 optgroup

select2 使用 ajax 时删除默认选项

jQuery Select2 - 如何隐藏 Select2 Optgroup

如何重置select2中的特定选定选项

如何隐藏搜索框和占位符?