如何使用 select2 插件隐藏下拉列表中的选项？答案

【问题标题】：How to hide options in a dropdown using select2 plugin?如何使用 select2 插件隐藏下拉列表中的选项？
【发布时间】：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>

【问题讨论】：

显示更多代码。
已编辑问题。我在后端看到的下拉选项。必须根据下拉值隐藏该特定值的要求。请帮忙。

标签： jquery jquery-select2

【解决方案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 时选项没有被禁用..