如何使用 select2 插件隐藏下拉列表中的选项？
Posted
技术标签:
【中文标题】如何使用 select2 插件隐藏下拉列表中的选项？【英文标题】：How to hide options in a dropdown using select2 plugin? 【发布时间】：2021-05-12 15:35:06 【问题描述】：我们正在通过列表填充下拉列表中的选项。这些值被添加到 Action 类的列表中。 当 option 等于某个特定值时，我们想隐藏它。
以下是代码：
if (stuval.substring(0, 7) == "<option")
$('#stuclass option:not(:first)').remove();
$('#stuclass').find('option').end().append($(stuval));
当值为“不适用”时如何隐藏选项？
我们正在使用 select2 插件。尝试在 CSS 中使用以下代码。
.select2-results [data-select2-id*="not apply"]
display : none;
此代码的问题是它正在从页面中的所有下拉列表中删除“不应用”选项。要求是如何申请该下拉列表（使用 id）。选项应该被隐藏但不被移除或禁用。请帮助
html 代码：
<tr>
<td><b><bean:message
key="label.stuclass" />:</b></td>
<td><html:select property="stuclass" style="text-transform: uppercase;background-color: #A5A5A5;"
styleId="stuclass">
<html:option value=""><bean:message key="label.stuclass.select" /></html:option>
<html:optionsCollection name="studentForm" property="stuList" label="label" value="value" />
</html:select></td>
</tr>
While Jquery loading :
$("#stuclass").select2( width: '150px');
将“不适用”作为其选项之一的其他下拉菜单：（通过操作类将值加载到后端的此下拉菜单中）
$("#stuStatusSearch").select2( width: '150px');
<html:select property="stuStatusSearch" styleId="stuStatusSearch">
<html:option value=""><bean:message key="label.stuStatusSearch.select" />
</html:option><html:optionsCollection name="studentForm" property="stuStatusList" label="label" value="value" />
</html:select>
【问题讨论】：
显示更多代码。 已编辑问题。我在后端看到的下拉选项。必须根据下拉值隐藏该特定值的要求。请帮忙。 【参考方案1】：使用 templateResult：它是选择要显示/或隐藏哪些选项的解决方案。在这个示例中，我不想展示 Apple、Cat 和 ViewExposure。
$("#example").select2(
templateResult: function(option, container)
if ($(option.element).attr("data-select2-id") == "not apply")
$(container).css("display","none");
return option.text;
);//put this line in css file to avoid empty line in search
//not necessary with templateResult
/*
li.select2-results__option:empty
display: none;
*/<html>
<body>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option data-select2-id='not apply' value="1">Apple</option>
<option value="Bat">Bat</option>
<option data-select2-id='not apply' value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Elephant">Elephant</option>
<option data-select2-id='not apply' value="ViewExposure">ViewExposure</option>
<option value="DummyData">Dummy - Data</option>
<option value="Dummy-Data">Dummy-Data</option>
<option value="Dummy:Data">Dummy:Data</option>
<option value="Dummy(Data)">Dummy(Data)</option>
</select>
</body>
</html>生成的Html：第一个选项可以看到显示none
<ul class="select2-results__options" role="listbox" aria-multiselectable="true" id="select2-example-results" aria-expanded="true" aria-hidden="false">
<li class="select2-results__option select2-results__option--selectable" id="select2-example-result-u9nt-1" role="option" data-select2-id="select2-data-select2-example-result-u9nt-1" aria-selected="false" style="display: none;">Apple</li>
<li class="select2-results__option select2-results__option--selectable" id="select2-example-result-9nwy-Bat" role="option" data-select2-id="select2-data-select2-example-result-9nwy-Bat" aria-selected="false">Bat</li>
:
<li class="select2-results__option select2-results__option--selectable" id="select2-example-result-eazj-Dummy(Data)" role="option" data-select2-id="select2-data-select2-example-result-eazj-Dummy(Data)" aria-selected="false">Dummy(Data)</li>
</ul>
每次打开下拉菜单时都会生成 Html...
【讨论】：
如何在 Select2 中使用 id 隐藏下拉选项。您提供的代码会在该页面的所有下拉菜单中隐藏选项。 在你的 html 代码中显示你不同的下拉菜单.. 你可以用#id代替类，看我修改的答案 为什么不显示页面html中生成的html代码？那会更容易看到你的问题 使用 #id 它不起作用..你能建议我其他方法吗？当我使用 ID 时选项没有被禁用..以上是关于如何使用 select2 插件隐藏下拉列表中的选项？的主要内容，如果未能解决你的问题，请参考以下文章