我已经意识到 Chrome 似乎不允许我隐藏<option>在<select>. 火狐会。
我需要隐藏<option>与搜索条件匹配的s。在 Chrome 网络工具中，我可以看到display: none;我的 JavaScript正确设置了它们，但是一旦<select>单击菜单，它们就会显示出来。
<option>单击菜单时，如何使与我的搜索条件匹配的这些s 不显示？谢谢！
如何使用 CSS 在 <select> 菜单中隐藏 <option>？
IT技术
javascript
jquery
css
dom
2021-01-26 02:47:20
6个回答
对于 HTML5，您可以使用 'hidden' 属性。
<option hidden>Hidden option</option>
IE < 11不支持它。但是如果您只需要隐藏几个元素，与添加/删除元素或不进行语义正确的构造相比，将 hidden 属性与 disabled 结合起来可能会更好。
<select>
<option>Option1</option>
<option>Option2</option>
<option hidden>Hidden Option</option>
</select>参考。
您必须实现两种隐藏方法。display: none适用于 FF，但不适用于 Chrome 或 IE。所以第二种方法是将 包裹<option>在一个<span>with 中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 建议的额外检查
我会建议你做不使用使用该解决方案的<span>包装，因为它不是有效的HTML，这可能导致在路上的问题。我认为首选的解决方案是实际删除您希望隐藏的任何选项，并根据需要恢复它们。使用 jQuery，你只需要这 3 个函数：
第一个函数将保存select的原始内容。为安全起见，您可能希望在加载页面时调用此函数。
function setOriginalSelect ($select) {
if ($select.data("originalHTML") == undefined) {
$select.data("originalHTML", $select.html());
} // If it's already there, don't re-set it
}
next 函数调用上述函数以确保原始内容已保存，然后简单地从 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/
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;" />');
}
};
否则它会被包裹在太多标签中
以这种方式选择输入很棘手。禁用它怎么样，这将跨浏览器工作：
$('select').children(':nth-child(even)').prop('disabled', true);
这将禁用所有其他<option>元素，但您可以选择您想要的任何一个。
这是一个演示：http : //jsfiddle.net/jYWrH/
注意：如果要删除元素的 disabled 属性，可以使用.removeProp('disabled').
更新
您可以将<option>要隐藏的元素保存在隐藏的选择元素中：
$('#visible').on('change', function () {
$(this).children().eq(this.selectedIndex).appendTo('#hidden');
});
然后，您可以将<option>元素添加回原始选择元素：
$('#hidden').children().appendTo('#visible');
在这两个示例中，预期可见的 select 元素的 id 为visible，隐藏的 select 元素的 id 为hidden。
这是一个演示：http : //jsfiddle.net/jYWrH/1/
请注意，这.on()是 jQuery 1.7 中的新内容，此答案的用法与以下内容相同.bind()：http : //api.jquery.com/on