目前我正在使用jQuery使用以下代码隐藏/显示选择选项。
$("#custcol7 option[value=" + sizeValue + "]").hide();
这在Firefox中运行良好，但在其他浏览器中没有任何好处。如何隐藏Chrome，Opera和IE中的选项？
答案 0 :(得分：44)
我刚刚碰到了这个而不是一遍又一遍地克隆整个选择我只是替换了需要用span元素隐藏的选项并隐藏了跨度（尽管浏览器还没有直观显示它们，我思考） - 您可能需要更改代码（如果复杂）以迭代复杂逻辑的跨度。
跨度存储对option的引用，并在需要显示时将其替换为自己。
这段代码显然可以重构和美化。
http://fiddle.jshell.net/FAkEK/12/show/
编辑＃2（使用这个版本）：我想到，不是做所有这个克隆/引用/替换垃圾，只需用span填充选项，隐藏跨度，然后打开show再次使用该选项替换span ..
答案 1 :(得分：28)
我认为 meder 提供了有效答案，此处略有改动以反映对我有用的内容：
$.fn.optVisible = function( show ) {
if( show ) {
this.filter( "span > option" ).unwrap();
} else {
this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
}
return this;
}
使用（漫长的BrowserStack）测试：
答案 2 :(得分：10)
你没有，它在IE中不受支持（并且可能不支持Chrome或Opera）。如果您希望它们真正不可见，则必须完全删除这些选项并稍后再添加它们。但在大多数情况下，简单的disabled="disabled"应该足够了，并且比处理删除和添加选项简单得多。
答案 3 :(得分：9)
尝试分离（）。 如果需要，可以使用append（）或insertAfter（）
重新附加它答案 4 :(得分：7)
要删除选项，请使用：
var opt=$("option").detach();
显示选项使用：
opt.appendTo( "select" );
答案 5 :(得分：3)
删除它并将其存储在JavaScript中的var中。您可以在以后需要时创建新对象。
否则请尝试上面提到的disabled属性。
答案 6 :(得分：2)
/**
* 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);
}
});
};
答案 7 :(得分：2)
你做它的方式应该在chrome中工作但是nvm.Here是另一种方式
select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();
如果你想再次展示它：
select.append('<option value="'+sizeValue+'"></option>');
它适用于每个浏览器及其非常简单的代码。问题是如果你想要隐藏几个选项，那就更多的是打字..但如果它们没有像这样动态变化，可以通过将它们放入变量来解决：
var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';
select.append(options);
这样一来，如果你必须删除/追加几个地方你只输入一次选项。希望我给了另一个有趣的选项。最诚挚的问候。
答案 8 :(得分：1)
还有.load方法：
s_parent.change(function(){
s_child.load('./fetch_options.php",{'v',s_parent.val()});
}
'fetch_options.php'脚本只会根据您使用的数据源和传入的父值打印选项标记。
答案 9 :(得分：1)
您可以使用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()
});
答案 10 :(得分：1)
我的观点与其他答案略有不同。
目的不是隐藏选项，而是让它们禁用（以保持UI一致）。
我的情景：
我在表单中有多个选项，当用户在其中一个选项中选择一个选项时，其他选项应禁用此选项，反之亦然。限制用户选择已选择的相同选项。我们通常禁用该选项，但对于不支持它的IE 7。用户还可以选择添加新选择。
解决方案：
载入时：
如果浏览器是IE7，那么在填充选择并禁用其他选项上已选择的选项时，我正在为选项添加自定义属性（＆＃34; data-ie7-disabled＆＃34;）并且还要更改禁用选项的颜色为＆＃39; #cccccc＆＃39;（这是已禁用选项的标准颜色）。这使得UI在浏览器中看起来相同。
On Change：
我将前一个选项保存在局部变量中（这在焦点上保存）。
当用户尝试更改选项时
用户选择一个未在任何其他下拉列表中选择的完整新选项。然后我循环浏览其他选项并更改颜色，并在其他选择中将自定义属性添加到此选定选项。
当用户选择已选择的选项时（灰色显示的选项）。我首先检查该选项是否具有此自定义属性。如果它具有那么>我只是将选项恢复为上一个选项，并显示错误消息＆＃34;此选项已被选中或BLAH BLAH＆＃34;。
当用户将其现有选项更改为未在任何其他下拉列表中选择的全新选项时。我再次遍历所有其他选择选项并删除它上面的颜色以及自定义属性。
希望这会有所帮助。
答案 11 :(得分：0)
<html>
<head><script>
$(document).ready(function(){
$("#l1").change(function(){
var selectedId=$("#dl1 option[value='"+$(this).val()+"']").attr("id");
$("#dl2 option[data-id ='"+selectedId+"']").removeAttr('disabled');
$("#dl2 option[data-id !='"+selectedId+"']").attr('disabled','disabled');
$("#l2").val("");
});
});
</script></head>
<body>
<label for="l1">choose country</label>
<input list="dl1" name="l1" id="l1" type='select'>
<datalist id="dl1" name="dl1">
<option value="India" id=1>
<option value="US" id=2>
<option value="Germany" id=3>
</datalist>
<br>
<label for="l2">choose City</label>
<input list="dl2" name="l2" id="l2" type='select'>
<datalist id="dl2">
<option value="New Delhi" id="11" data-id="1">
<option value="Washington DC" id="12" data-id="2">
<option value="Berlin" id="13" data-id="3">
<option value="Mumbai"id="14" data-id="1">
<option value="NewYork" id="15" data-id="2">
<option value="Munich" id="16" data-id="3">
</datalist>
</body>
</html>
答案 12 :(得分：0)
医疗的解决方案是我要解决的，但是进行了一些细微调整，以防止将选项包装在一个已经属于跨度的跨度中。
$.fn.hideOption = function() {
this.each(function() {
if (!$(this).parent().is('span')) {
$(this).wrap('<span>').hide();
}
});
};
$.fn.showOption = function() {
this.each(function() {
var opt = $(this).find('option').show();
$(this).replaceWith(opt);
});
};
答案 13 :(得分：0)
在IE 11（Edge）中，以下代码正在运行。
$("#id option[value='1']").remove();
和广告，
$('<option>').val('1').text('myText').appendTo('#id');
答案 14 :(得分：0)
您也可以替换select中的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>');
});
不完全是你想要的，但也许有帮助。对于较小的下拉菜单，它肯定更容易。
答案 15 :(得分：0)
使用AuthorProxy提供的解决方案，它适用于IE，但是当我尝试在firefox的下拉列表中执行.val（）时，我得到一些没有任何意义的时髦值。我已经修改了他们的选项，包括浏览器特定功能，隐藏/显示适用于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();
}
}
});
};
答案 16 :(得分：0)
您需要将其删除，然后再次为Internet Explorer添加它。
删除：
$("#custcol7 option[value=" + sizeValue + "]").remove();
添加：
$("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );
请注意，您还需要在选项文本中包含sizeValue才能真正看到某些内容。
答案 17 :(得分：0)
您可以使用：
$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});
它适用于除Safari和Opera之外的所有浏览器。我正在寻找另一种最佳解决方案：）