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

Question

我们正在通过 list.The 在操作 class 中的列表中添加值来填充下拉列表中的选项。当 option 等于特定值时，我们想隐藏它。

代码如下：

if (stuval.substring(0, 7) == "<option") {  
   $('#stuclass option:not(:first)').remove(); 
   $('#stuclass').find('option').end().append($(stuval));
}

如何在值为'Not apply'时隐藏选项？

我们在 CSS.

中使用带有以下代码的 select2 plugin.Tried

.select2-results [data-select2-id*="not apply"]{
  display : none;
 }

此代码的问题是它正在从所有下拉列表中删除 'not apply' 选项 page.Requirement 是如何申请该下拉列表（使用 id）。选项应该被隐藏但不能被删除或disabled.Kindly帮助

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'});

Other Dropdown which has 'not apply' as its one of its options:(values are loaded into this dropdown in backend through action class)

                        $("#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>

Answer 1

使用 templateResult：它是 select 您想要 show/or 隐藏哪些选项的解决方案。在此示例中，我不想显示 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 插件隐藏下拉列表中的选项？

How to hide options in a dropdown using select2 plugin?

jquery

jquery-select2