隐藏 select2 多选中的选项

Posted 2023-05-07

【中文标题】隐藏 select2 多选中的选项

【英文标题】：Hide options in select2 multi select

【发布时间】：2019-02-10 06:03:39

【问题描述】：

我需要隐藏/显示 select2 多选

中的选项

我尝试过类似的方法，但选项二没有隐藏：

 $(document).ready(function() 
  $('#test').select2();
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <select id="test" multiple style="width:250px">
        <option value="1">One</option>
        <option value="2" style='display:none;'>Two</option>
        <option value="3">Three</option>
    </select>

我添加了一个 jsfiddle： https://jsfiddle.net/sindhujagovindaraju/xpvt214o/738000/

【问题讨论】：

你试过visibility:hidden吗？

@Luca 是的。但没有结果。

这似乎工作正常，您可以检查版本

重复***.com/questions/25064487/…

@RupeshAgarwal：我添加了一个 jsfiddle：jsfiddle.net/sindhujagovindaraju/xpvt214o/738000

【参考方案1】：

您必须使用“禁用”而不是“显示：无”并编写如下 css：

$(document).ready(function()
    $("#test").select2();
);

.select2-container--default .select2-results__option[aria-disabled=true]  display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <select id="test" multiple style="width:250px">
        <option value="1">One</option>
        <option value="2" disabled>Two</option>
        <option value="3">Three</option>
 </select>

【参考方案2】：

您可以使用以下代码：

option[value=2] 显示：无；

最好为每个 li 元素动态添加一个 css 类/id 并将它们作为目标而不是可能动态的值

ps：虽然Options with display:none not hidden in IE IE 可能有点问题

【讨论】：

它不适用于任何浏览器。检查我更新的代码。

【参考方案3】：

 .Select-input option:nth-child(4)display: none;

【讨论】：

是的。没有结果:(

在你的情况下，只需尝试“.Select-input option:nth-child(2)display: none;”

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。