Как скрыть параметр <option> в меню <select> с помощью CSS?
Я понял, что Chrome, похоже, не позволит мне скрыть <option>
в <select>
. Firefox будет.
Мне нужно скрыть <option>
, которые соответствуют критериям поиска. В веб-инструментах Chrome я вижу, что они правильно устанавливаются на display: none;
моим JavaScript, но после нажатия на это <select>
они отображаются.
Как я могу сделать эти <option>
, которые соответствуют моим критериям поиска, НЕ показывать, когда нажимается меню? Спасибо!
Ответы
Ответ 1
Вам нужно реализовать два метода для скрытия. display: none
работает для FF, но не для Chrome или IE. Таким образом, второй метод обертывает <option>
в <span>
с помощью display: none
. FF этого не сделает (технически недействительный HTML, по спецификации), но Chrome и IE будут скрыты.
EDIT: О да, я уже реализовал это в 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
EDIT 3: добавлена дополнительная проверка, предложенная @user1521986
Ответ 2
Для HTML5 вы можете использовать атрибут 'hidden'.
<option hidden>Hidden option</option>
Он не поддерживается IE < 11. Но если вам нужно только скрыть несколько элементов, возможно, было бы лучше просто установить скрытый атрибут в сочетании с отключенным по сравнению с добавлением/удалением элементов или не семантически корректными конструкциями.
<select>
<option>Option1</option>
<option>Option2</option>
<option hidden>Hidden Option</option>
</select>
Ответ 3
Я бы предположил, что вы не используете решения, которые используют обертку <span>
, потому что это неверный HTML, что может вызвать проблемы в будущем. Я думаю, что предпочтительным решением является фактически удалить любые параметры, которые вы хотите скрыть, и восстановить их по мере необходимости. Используя jQuery, вам понадобятся только эти 3 функции:
Первая функция сохранит исходное содержимое выбора. Чтобы быть в безопасности, вы можете вызвать эту функцию при загрузке страницы.
function setOriginalSelect ($select) {
if ($select.data("originalHTML") == undefined) {
$select.data("originalHTML", $select.html());
} // If it already there, don't re-set it
}
Эта следующая функция вызывает указанную выше функцию для обеспечения сохранения исходного содержимого и просто удаляет параметры из DOM.
function removeOptions ($select, $options) {
setOriginalSelect($select);
$options.remove();
}
Последняя функция может использоваться всякий раз, когда вы хотите "reset" вернуться ко всем исходным параметрам.
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/
Ответ 4
Ответ Ryan P должен быть изменен на:
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;" />');
}
};
В противном случае он обернут слишком большим количеством тегов
Ответ 5
Функция 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>
Ответ 6
Выбор входных данных является сложным. Как бы отключить его, это будет работать в кросс-браузере:
$('select').children(':nth-child(even)').prop('disabled', true);
Это отключит каждый элемент <option>
, но вы можете выбрать, какой из них вам нужен.
Вот демо: http://jsfiddle.net/jYWrH/
Примечание. Если вы хотите удалить отключенное свойство элемента, вы можете использовать .removeProp('disabled')
.
Update
Вы можете сохранить элементы <option>
, которые вы хотите скрыть, в скрытом элементе select:
$('#visible').on('change', function () {
$(this).children().eq(this.selectedIndex).appendTo('#hidden');
});
Затем вы можете добавить элементы <option>
к исходному элементу выбора:
$('#hidden').children().appendTo('#visible');
В этих двух примерах ожидалось, что видимый элемент select имеет идентификатор visible
, а элемент скрытого выбора имеет идентификатор hidden
.
Вот демо: http://jsfiddle.net/jYWrH/1/
Обратите внимание, что .on()
является новым в jQuery 1.7, а использование для этого ответа совпадает с .bind()
: http://api.jquery.com/on
Ответ 7
Простой ответ: вы не можете. Элементы формы имеют очень ограниченные возможности стилизации.
Лучшей альтернативой было бы установить disabled=true
в опции (и, возможно, серый цвет, так как только IE делает это автоматически), и это сделает опцию незаметной.
В качестве альтернативы, если вы можете, полностью удалите элемент option
.
Ответ 8
// Simplest way
var originalContent = $('select').html();
$('select').change(function() {
$('select').html(originalContent); //Restore Original Content
$('select option[myfilter=1]').remove(); // Filter my options
});
Ответ 9
Поскольку вы уже используете JS, вы можете создать скрытый элемент SELECT на странице, и для каждого элемента, который вы пытаетесь скрыть в этом списке, переместите его в скрытый список. Таким образом, их можно легко восстановить.
Я не знаю, как это сделать из чистого CSS... Я бы подумал, что дисплей: ни один трюк не сработает.
Ответ 10
Вы должны удалить их из <select>
с помощью JavaScript. Это единственный гарантированный способ заставить их уйти.
Ответ 11
!!! ПРЕДУПРЕЖДЕНИЕ!!!
Заменить второй "IF" на "WHILE" или не работает!
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;" />' );
}
};
Ответ 12
этот, кажется, работает для меня в хроме
$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');
Ответ 13
Поздно к игре, но большинство из них кажутся довольно сложными.
Вот как я это сделал:
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>