如何使用CSS在<select>菜单中隐藏<option>

我意识到Chrome似乎不允许我在<select>隐藏<option> <select> 。 Firefox将会。

我需要隐藏符合搜索条件的<option> 。 在Chrome的网络工具,我可以看到,他们正确地被设置为display: none; 由我的JavaScript,但一旦然后<select>菜单点击他们显示。

如何使这些匹配我的搜索条件的<option>在单击菜单时不显示? 谢谢!

13 Solutions collect form web for “如何使用CSS在<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> 
  • 如何检测文本框的内容已经改变
  • $(“#id”)。load和$ .ajax之间的区别?
  • IDselect器中的jQuery点?
  • 迭代<select>选项
  • jquery:从类select器获取ID
  • 如何判断一个string是否包含JavaScript中的某个字符?
  • JSHint和jQuery:'$'没有定义
  • HTML <select>select事件的名称是什么?
  • Javascript如何拆分换行符
  • 如何使用jquery淡入/淡出背景色?
  • jQuery获取元素相对于另一个元素的位置