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

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

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

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

Вы должны реализовать два метода сокрытия. display: noneработает для FF, но не для Chrome или IE. Таким образом, второй метод оборачивания <option>в <span>с display: none. FF этого не сделает (технически недействительный HTML согласно спецификации), но Chrome и IE будут, и он скроет эту опцию.

РЕДАКТИРОВАТЬ: О да, я уже реализовал это в jQuery:

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

РЕДАКТИРОВАТЬ 2: Вот как вы могли бы использовать эту функцию:

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

РЕДАКТИРОВАТЬ 3: добавлена ​​дополнительная проверка, предложенная @ user1521986

Для HTML5 вы можете использовать атрибут «скрытый».

<option hidden>Hidden option</option>

Это не поддерживается IE <11. Но если вам нужно скрыть только несколько элементов, возможно, было бы лучше просто установить атрибут hidden в сочетании с disabled по сравнению с добавлением / удалением элементов или созданием семантически некорректных конструкций.

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

Ссылка .

Я бы посоветовал вам не использовать решения, использующие <span>оболочку, потому что это недопустимый HTML, что может вызвать проблемы в будущем. Я думаю, что предпочтительное решение - удалить все параметры, которые вы хотите скрыть, и восстановить их по мере необходимости. Используя jQuery, вам понадобятся только эти 3 функции:

Первая функция сохранит исходное содержимое выбора . На всякий случай вы можете вызвать эту функцию при загрузке страницы.

function setOriginalSelect ($select) {
    if ($select.data("originalHTML") == undefined) {
        $select.data("originalHTML", $select.html());
    } // If it's already there, don't re-set it
}

Следующая функция вызывает указанную выше функцию, чтобы убедиться, что исходное содержимое было сохранено, а затем просто удаляет параметры из модели DOM.

function removeOptions ($select, $options) {
    setOriginalSelect($select);
    $options.remove();
 }

Последнюю функцию можно использовать всякий раз, когда вы хотите «сбросить» все исходные параметры.

function restoreOptions ($select) {
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) {
        $select.html(ogHTML);
    }
}

Обратите внимание, что все эти функции ожидают, что вы передадите элементы jQuery. Например:

// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed

Вот рабочий пример: http://jsfiddle.net/9CYjy/23/

Ответ Райана П. следует изменить на:

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

В противном случае он будет заключен в слишком много тегов

Функция toggleOption не идеальна и внесла неприятные ошибки в мое приложение. jQuery запутается с .val () и .arraySerialize (). Попробуйте выбрать варианты 4 и 5, чтобы понять, что я имею в виду:

<select id="t">
<option value="v1">options 1</option>
<option value="v2">options 2</option>
<option value="v3" id="o3">options 3</option>
<option value="v4">options 4</option>
<option value="v5">options 5</option>
</select>
<script>
jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

$("#o3").toggleOption(false); 
$("#t").change(function(e) {
    if($(this).val() != this.value) {
    console.log("Error values not equal", this.value, $(this).val());
    }
});
</script>

Таким образом, выбрать входы сложно. Что насчет его отключения, это будет работать в кросс-браузере:

$('select').children(':nth-child(even)').prop('disabled', true);

Это отключит все остальные <option>элементы, но вы можете выбрать, какой хотите.

Вот демонстрация: http://jsfiddle.net/jYWrH/

Примечание. Если вы хотите удалить отключенное свойство элемента, вы можете использовать его .removeProp('disabled').

Обновить

Вы можете сохранить <option>элементы, которые хотите скрыть, в скрытом элементе выбора:

$('#visible').on('change', function () {
    $(this).children().eq(this.selectedIndex).appendTo('#hidden');
});

Затем вы можете добавить <option>элементы обратно в исходный элемент выбора:

$('#hidden').children().appendTo('#visible');

В этих двух примерах ожидается, что видимый элемент выбора имеет идентификатор, visibleа скрытый элемент выбора имеет идентификатор hidden.

Вот демонстрация: http://jsfiddle.net/jYWrH/1/

Обратите внимание, что .on()это новинка в jQuery 1.7, и использование этого ответа такое же, как .bind(): http://api.jquery.com/on

Простой ответ: нельзя. Элементы формы имеют очень ограниченные возможности стилизации.

Лучшей альтернативой было бы установить disabled=trueэту опцию (и, возможно, серый цвет, поскольку только IE делает это автоматически), и это сделает эту опцию неактивной.

С другой стороны , если вы можете полностью удалить optionэлемент.

// Simplest way

var originalContent = $('select').html();

$('select').change(function() {
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
});

Поскольку вы уже используете JS, вы можете создать скрытый элемент SELECT на странице и для каждого элемента, который вы пытаетесь скрыть в этом списке, переместить его в скрытый список. Таким образом, их можно легко восстановить.

Я не знаю, как сделать это на чистом CSS ... Я бы подумал, что уловка display: none не сработает.

!!! ВНИМАНИЕ !!!

Замени второй «ЕСЛИ» на «ПОКА» или не работает!

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

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

этот, кажется, работает для меня в хроме

$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');

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

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

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>