在IE中使用jQuery隐藏select选项

目前我正在使用jQuery隐藏/显示使用下面的代码select选项。

$("#custcol7 option[value=" + sizeValue + "]").hide(); 

这在Firefox中运行正常,但在其他浏览器中没有任何好处。 如何在Chrome,Opera和IE中隐藏选项?

我只是碰到这个,而不是克隆整个select一遍又一遍,我只是取代了需要与span元素隐藏的选项,并隐藏跨度(虽然浏览器并没有视觉上显示他们,我认为) – 你可能需要改变你的代码(如果复杂的话)来遍历复杂逻辑的跨度。

跨度存储对option的引用,并在需要显示时用自己replace。

这个代码显然可以重构和美化。

http://fiddle.jshell.net/FAkEK/12/show/

编辑#2(使用这个INSTEAD):我想到,而不是做所有这些克隆/参考/replace废话,只是用一个跨度包裹选项,隐藏跨度,并显示只是用选项再次replace跨度。 。

http://fiddle.jshell.net/FAkEK/25/show/

我想法律提供了有效的答案,在这里稍微改变,以反映什么适合我:

 $.fn.optVisible = function( show ) { if( show ) { this.filter( "span > option" ).unwrap(); } else { this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide(); } return this; } 

testing(长期BrowserStack):

  • Windows XP:IE 6.0,Firefox 3.0,Safari 4.0,Opera 10.0,Chrome 14.0
  • Windows 8:IE 10.0 Metro
  • iOS 3.2(iPad),iOS 6.0(iPhone 5)
  • Android 1.6(索尼Xperia X10)

的jsfiddle

你不这样做,它不支持在IE浏览器(也可能不在Chrome或Opera)。 你将不得不完全删除这些选项,如果你想让它们真的看不见,就把它们添加回来。 但是在大多数情况下,简单的disabled="disabled"就足够了,比处理删除和添加选项简单得多。

尝试detach()。 如果需要,可以使用append()或insertAfter()重新附加它,

要删除选项使用:

 var opt=$("option").detach(); 

要显示选项使用:

 opt.appendTo( "select" ); 

只需将其删除并将其存储在JavaScript中的variables中即可。 稍后您可以随时创build新对象。

否则,请尝试上面提到的disabled属性。

 /** * Change visibility of select list option elements * @param {boolean} stateVal show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state */ $.fn.toggleOptionVisibility = function (stateVal) { var isBool = typeof stateVal === "boolean"; return this.each(function () { var $this = $(this); if (isBool) { if (stateVal) $this.filter("span > option").unwrap(); else $this.filter(":not(span > option)").wrap("<span>").parent().hide(); } else { $this.filter("span > option").toggleOptionVisibility(true); $this.filter(":not(span > option)").toggleOptionVisibility(false); } }); }; 

你这样做的方式应该在铬,但是nvm。这是另一种方式

 select = $('#custcol7'); select.find('option[value=["'+sizeValue +'"]').remove(); 

如果你想再次显示它:

 select.append('<option value="'+sizeValue+'"></option>'); 

它在每个浏览器和它非常简单的代码上都能很好地工作 问题是,如果你想隐藏几个选项,它更多的是键入..但是可以通过将它们放入variables来解决,如果它们不像这样dynamic改变:

 var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>'; select.append(options); 

这样,如果你必须删除/追加几个地方,你只能input一次选项。希望我给了另一个有趣的select。 最好的祝福。

还有一个.load方法:

 s_parent.change(function(){ s_child.load('./fetch_options.php",{'v',s_parent.val()}); } 

'fetch_options.php'脚本会根据您使用的任何数据源和传入的父值打印选项标记。

我的看法与其他答案有所不同。

目标不是隐藏选项,而是让它们禁用(保持UI一致)。

我的情景:

我有一个窗体中的多个select,当用户select其中一个select选项时,其他select应该禁用此选项,反之亦然。 用户被限制select已经select的相同选项。 我们通常禁用该选项,但IE 7不支持它。 用户还可以select添加新的select。

解答:

负载 :

如果浏览器是IE7,然后填充select和禁用其他select已经select的选项,我正在添加一个自定义属性的选项(“ data-ie7-disabled ”),也改变了禁用选项的颜色为' #cccccc '(这是禁用选项的标准颜色)。 这使得用户界面在浏览器中看起来相同。

在变化:

我将前一个选项保存在局部variables中(这保存在焦点上)。

当用户尝试更改选项时

  1. 用户select在其他下拉菜单中未选中的完整新选项。 然后,我循环其他select并更改颜色,并将自定义属性添加到其他select上的此选定选项。

  2. 当用户select一个已被选中的选项时(该选项呈灰色)。 我检查选项是否有第一个这个自定义属性。 如果它有>然后我简单地恢复到前一个选项与一个错误消息说:“这个选项已被选中或BLAH BLAH”。

  3. 当用户将其现有选项更改为未在其他任何下拉菜单中select的全新选项时。 我再次循环所有其他select选项,并删除它的颜色和自定义属性。

希望这可以帮助。

你可以通过var $opt=$('select>option').clone()$('select option[value="'+val+'"').remove() 。 还有一个例子:试试这个。 https://jsfiddle.net/sherali/jkw8fxzf/12/

 var $secondOption= $('#second-choice>option').clone(); $("#first-choice").change(function() { var userSelected = $(this).val(); $('#second-choice').html($secondOption); $('#second-choice option[value="'+userSelected+'"').remove() }); 

你可以使用这个:

 $("#custcol7 option[value=" + sizeValue + "]").css({display:'none'}); 

它在除Safari和Opera之外的所有浏览器上都能正常工作。 我正在寻找另一个最好的解决scheme:)

您将需要删除它,然后再为Internet Explorer添加它。

去除:

 $("#custcol7 option[value=" + sizeValue + "]").remove(); 

加上:

 $("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" ); 

请注意,您还需要在选项文本中包含sizeValue,以便实际查看某些内容。

使用AuthorProxy提供的解决scheme,它适用于IE浏览器,但是当我尝试在Firefox的下拉菜单上执行.val()时,我得到了一些没有任何意义的时髦值。 我已经修改了他们的选项,包括浏览器的具体function,隐藏/显示Firefox的作​​品。

 $.fn.toggleOptionVisibility = function (stateVal) { var isBool = typeof stateVal === "boolean"; return this.each(function () { var $this = $(this); if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) { if (isBool) { if (stateVal) $this.filter("span > option").unwrap(); else $this.filter(":not(span > option)").wrap("<span>").parent().hide(); } else { $this.filter("span > option").toggleOptionVisibility(true); $this.filter(":not(span > option)").toggleOptionVisibility(false); } } else { if (isBool) { $this.show(); } else { $this.hide(); } } }); }; 

您也可以replaceselect内的HTML。

HTML:

 <input id="Button1" type="button" value="hide option" /> <select id="foo"> <option >stuff</option> <option >stuff2</option> </select> 

jQuery的:

  $("#Button1").change(function () { $('#foo').html('<option >stuff</option>'); }); 

不完全是你想要的,但也许有帮助。 对于更小的下拉菜单,它肯定更容易。

在IE 11(Edge)中,以下代码正在工作。

  $("#id option[value='1']").remove(); 

并回顾,

 $('<option>').val('1').text('myText').appendTo('#id');