在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跨度。 。
我想法律提供了有效的答案，在这里稍微改变，以反映什么适合我：
$.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中（这保存在焦点上）。
当用户尝试更改选项时
-
用户select在其他下拉菜单中未选中的完整新选项。 然后，我循环其他select并更改颜色，并将自定义属性添加到其他select上的此选定选项。
-
当用户select一个已被选中的选项时（该选项呈灰色）。 我检查选项是否有第一个这个自定义属性。 如果它有>然后我简单地恢复到前一个选项与一个错误消息说：“这个选项已被选中或BLAH BLAH”。
-
当用户将其现有选项更改为未在其他任何下拉菜单中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');
