Скрыть опцию в меню выбора 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?Я могу только удалить опции, но скрыть их кажется невозможным.

Например, я пытаюсь скрыть опцию 'RAL Sonderfarbe' на выбранной Farbe :

Попытка(в консоли разработчика):

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>

Answer 1

Установите для атрибута disabled значение true для параметра, который даст сгенерированному 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>

Но тогда все отключенные опции становятся невидимыми.

Answer 2

Я решил это, расширив ядро ​​jQuery UI javascript и css.

Пример:

var $el = jQuery('option:contains("B")');
$('#mySelect').selectmenu();

jQuery('#hide_option_b').click(function() {
  $el.attr('hidden',true);
  $('#mySelect').selectmenu('refresh');
});
jQuery('#show_option_b').click(function() {
  $el.attr('hidden',false);
  $('#mySelect').selectmenu('refresh');
});

<link href="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.js"></script>

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

<button id="hide_option_b">Hide option B</button>
<button id="show_option_b">Show option B</button>

Я добавил это к jquery-ui.css (https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.css)

/* Hidden */
.ui-state-hidden { display: none; }

И я изменил / добавил несколько строк в jquery-ui.min.js (https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.js):

Изменено _renderItem с:

_renderItem: function( ul, item ) {
    var li = $( "<li>" ),
        wrapper = $( "<div>", {
            title: item.element.attr( "title" )
        } );

    if ( item.disabled ) {
        this._addClass( li, null, "ui-state-disabled" );
    }

    this._setText( wrapper, item.label );

    return li.append( wrapper ).appendTo( ul );
},

до

_renderItem: function( ul, item ) {
    var li = $( "<li>" ),
        wrapper = $( "<div>", {
            title: item.element.attr( "title" )
        } );

    if ( item.disabled ) {
        this._addClass( li, null, "ui-state-disabled" );
    }
    if ( item.hidden ) {
        this._addClass( li, null, "ui-state-hidden" );
    }

    this._setText( wrapper, item.label );

    return li.append( wrapper ).appendTo( ul );
},

и _parseOption от:

_parseOption: function( option, index ) {
    var optgroup = option.parent( "optgroup" );

    return {
        element: option,
        index: index,
        value: option.val(),
        label: option.text(),
        optgroup: optgroup.attr( "label" ) || "",
        disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ),
    };
},

до

_parseOption: function( option, index ) {
    var optgroup = option.parent( "optgroup" );

    return {
        element: option,
        index: index,
        value: option.val(),
        label: option.text(),
        optgroup: optgroup.attr( "label" ) || "",
        disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ),
        hidden: optgroup.prop( "hidden" ) || optgroup.css( "display" ) == "none" || optgroup.css( "visibility" ) == "hidden"
                || option.prop( "hidden" ) || option.css( "display" ) == "none" || option.css( "visibility" ) == "hidden"
    };
},

Теперь скрытые параметры автоматически обнаруживаются и скрываются.