如何用CSS隐藏<select>菜单中的<option>？
我意识到Chrome似乎不会允许我将<option>隐藏在<select>中。Firefox会的。
我需要隐藏与搜索条件匹配的<option>。在Chrome web工具中，我可以看到它们被我的JavaScript正确地设置为display: none;，但是一旦点击<select>菜单，它们就会显示出来。
如何使这些与我的搜索条件匹配的<option>在单击菜单时不显示？谢谢!
回答 13
Stack Overflow用户
发布于 2012-02-11 05:14:04
您必须实现两个隐藏方法。display: none适用于FF，但不适用于Chrome或IE。因此，第二种方法是使用display: none将<option>包装在<span>中。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建议的额外检查
Stack Overflow用户
发布于 2012-12-27 02:31:44
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;" />');
}
};否则它会被包装在太多的标签中
Stack Overflow用户
发布于 2012-02-11 05:13:01
在这种情况下，选择输入是很棘手的。不如禁用它，这样就可以跨浏览器工作了：
$('select').children(':nth-child(even)').prop('disabled', true);这将禁用每隔一个<option>元素，但您可以选择您想要的元素。
这是一个演示：http://jsfiddle.net/jYWrH/
注意:如果想要删除元素的disabled属性，可以使用.removeProp('disabled')。
更新
您可以将要隐藏的<option>元素保存在隐藏的select元素中：
$('#visible').on('change', function () {
$(this).children().eq(this.selectedIndex).appendTo('#hidden');
});然后，可以将<option>元素添加回原始的select元素：
$('#hidden').children().appendTo('#visible');在这两个示例中，可见的选择元素的id为visible，隐藏的选择元素的id为hidden。
这是一个演示：http://jsfiddle.net/jYWrH/1/
请注意，.on()是jQuery 1.7中的新功能，此答案的用法与.bind()相同：http://api.jquery.com/on
https://stackoverflow.com/questions/9234830
复制相似问题