Как скрыть <option>в <select>меню с помощью CSS?

Question

Я понял, что Chrome, похоже, не позволит мне скрыть <option> в <select>.Firefox будет.

Мне нужно скрыть <option> s, которые соответствуют критериям поиска.В веб-инструментах Chrome я вижу, что они правильно устанавливаются на display: none; моим JavaScript, но как только после этого нажимается меню <select>, они отображаются.

Как мне сделать эти <option> s?которые соответствуют моим критериям поиска НЕ ​​отображаются при нажатии на меню?Спасибо!

Answer 1

!!!ПРЕДУПРЕЖДЕНИЕ !!!

Заменить второе «ЕСЛИ» на «ПОЧЕМУ» или не работает!

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        while( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

Answer 2

Вы должны удалить их из <select>, используя JavaScript.Это единственный гарантированный способ заставить их уйти.

Answer 3

Поздно к игре, но большинство из них кажутся довольно сложными.

Вот как я это сделал:

var originalSelect = $('#select-2').html();

// filter select-2 on select-1 change
$('#select-1').change(function (e) {

    var selected = $(this).val();

    // reset select ready for filtering
    $('#select-2').html(originalCourseSelect);

    if (selected) {
        // filter
        $('#select-2 option').not('.t' + selected).remove();
    }

});

разметка select-1:

<select id='select-1'>
<option value=''>Please select</option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>

разметка select-2:

<select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>