如何使用CSS在<select>菜单中隐藏<option>
我意识到Chrome似乎不允许我在<select>隐藏<option> <select> 。 Firefox将会。
我需要隐藏符合搜索条件的<option> 。 在Chrome的网络工具，我可以看到，他们正确地被设置为display: none; 由我的JavaScript，但一旦然后<select>菜单点击他们显示。
如何使这些匹配我的搜索条件的<option>在单击菜单时不显示？ 谢谢！
你必须实现两种隐藏方法。 display: none适用于FF，但不适用于Chrome或IE。 所以第二种方法是将<option>封装在<span>并使用display: none 。 FF不会这样做（技术上无效的HTML，根据规范），但铬和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。但是，如果只需要隐藏一些元素，也许最好将隐藏属性与禁用组合设置为相比于添加/删除元素或没有语义上正确的构造。
<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/
瑞安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;" />'); } };
否则，它被包裹在太多的标签
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>元素保存在隐藏的select元素中：
$('#visible').on('change', function () { $(this).children().eq(this.selectedIndex).appendTo('#hidden'); });
然后可以将<option>元素添加回原始的select元素：
$('#hidden').children().appendTo('#visible');
在这两个例子中，期望可见的select元素具有visible的id，隐藏的select元素具有hidden的id。
这里是一个演示： http : //jsfiddle.net/jYWrH/1/
注意.on()在jQuery 1.7中是新的，在这个答案中的用法与.bind()相同： http : //api.jquery.com/on
// 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这样做的方式…我会认为，显示：没有把戏会有效果。
简单的回答：你不能。 表单元素具有非常有限的样式功能。
最好的选择是在选项上设置disabled=true （也可能是灰色，因为只有IE自动执行），这将使该选项不可点击。
或者，如果可以的话，完全删除option元素。
！ 警告 ！！！
用“WHILE”替换第二个“IF”或不工作！
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;" />' ); } };
你应该使用JavaScript从<select>删除它们。 这是让他们离开的唯一保证方式。
这一个似乎在铬为我工作
$("#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>
