jquery - 隐藏 jQuery-UI 选择菜单中的选项

Question

在选择中隐藏选项是一项简单的任务。

jQuery("#bbb").hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="mySelect">
    <option id="aaa">A</option>
    <option id="bbb">B</option>
    <option id="ccc">C</option>
</select>

但是它在 Selectmenu UI 中是如何工作的？我只能删除选项，但隐藏它们似乎是不可能的。

例如，我尝试在选择Farbe上隐藏选项“RAL Sonderfarbe” ：

尝试（在开发控制台中）：

var $el = jQuery('option:contains("RAL Sonderfarbe")');
$el.hide();
$hausfux_laenge_dropdown.find('select').selectmenu('refresh');

但它不起作用。

我找到了一种解决方法，但是如果selectmenu('refresh');被调用，则该选项会再次出现...

$('#mySelect').selectmenu();
var mySelectOpened = false;

$('#mySelect').selectmenu({
    open: function(event, ui) {
        if (mySelectOpened == false) {
            mySelectOpened = true;
            var $el1 = $('#mySelect option:contains("B")');
            var $el2 = $('li:contains("B")');
            
            $el1.hide();
            $el2.hide();
        } 
    }
});

$("#refresh").click(function() {
    $('#mySelect').selectmenu('refresh');
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<select id="mySelect">
    <option id="aaa">A</option>
    <option id="bbb">B</option>
    <option id="ccc">C</option>
</select>

<button id="refresh">Refresh Selectmenu UI</button>

标签： jqueryjquery-uijquery-ui-selectmenu

Answer 1

将disabled属性设置为trueon 选项，这将li为该选项生成一个类ui-state-disabled，然后您可以使用 CSS 将其隐藏：

$(function() {
  var $el = jQuery('option:contains("B")');
  $el.attr('disabled',true);
  $('#mySelect').selectmenu();
});

li.ui-state-disabled {
  display:none;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<select id="mySelect">
    <option id="aaa">A</option>
    <option id="bbb">B</option>
    <option id="ccc">C</option>
</select>

但是所有禁用的选项都是不可见的。