Javascript 使用jQuery在IE中隐藏选择选项
目前，我使用jQuery隐藏/显示选择选项，代码如下Javascript 使用jQuery在IE中隐藏选择选项,javascript,jquery,html-select,Javascript,Jquery,Html Select,目前，我使用jQuery隐藏/显示选择选项，代码如下 $("#custcol7 option[value=" + sizeValue + "]").hide(); 这在Firefox中运行良好，但在其他浏览器中没有任何好处。如何在Chrome、Opera和IE中隐藏选项？如果不支持，IE中不支持，Chrome或Opera也不支持。如果您希望这些选项真正不可见，那么您必须完全删除它们，然后再将它们添加回来。但是在大多数情况下，一个简单的disabled=disabled应该就足够了，而且比处理选
$("#custcol7 option[value=" + sizeValue + "]").hide();
这在Firefox中运行良好，但在其他浏览器中没有任何好处。如何在Chrome、Opera和IE中隐藏选项？如果不支持，IE中不支持，Chrome或Opera也不支持。如果您希望这些选项真正不可见，那么您必须完全删除它们，然后再将它们添加回来。但是在大多数情况下，一个简单的disabled=disabled应该就足够了，而且比处理选项的删除和添加要简单得多。刚刚删除了它并将其存储在JavaScript中的一个变量中。您可以在以后需要时创建新对象 否则，请尝试上面提到的禁用属性。尝试分离。
如果需要，您可以稍后使用append或insertAfter重新附加它。还有.load方法：
s_parent.change(function(){
s_child.load('./fetch_options.php",{'v',s_parent.val()});
}
“fetch_options.php”脚本将根据您使用的任何数据源和传入的父值简单地打印选项标记。我只是遇到了这个问题，而不是反复克隆整个select，我只是用span元素替换了需要隐藏的选项，并隐藏了span，尽管浏览器没有这样做我认为，不管怎样，都要直观地显示它们——如果代码复杂，您可能需要更改代码，以迭代复杂逻辑的跨度 跨距存储对选项的引用，并在需要显示时将其自身替换为该选项 这段代码显然可以重构和美化 编辑2改为使用此选项：我突然想到，与其做所有这些克隆/引用/替换的废话，不如用span包装该选项，隐藏span，然后在显示时用该选项再次替换span 我认为meder提供了有效的答案，此处稍作修改，以反映对我有用的内容：
$.fn.optVisible = function( show ) {
if( show ) {
this.filter( "span > option" ).unwrap();
} else {
this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
}
return this;
}
你这样做的方式应该在chrome上运行，但是在nvm上。这里是另一种方式
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);
$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});
除了Safari和Opera之外，它在所有浏览器上都可以正常工作。我正在搜索另一个最佳解决方案：您需要删除它，然后为Internet Explorer再次添加它 删除：
$("#custcol7 option[value=" + sizeValue + "]").remove();
$("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );
请注意，您还需要在选项文本中包含sizeValue，才能真正看到一些内容。使用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();
}
}
});
};
您还可以替换select中的html Html: Jquery：
$("#Button1").change(function () {
$('#foo').html('<option >stuff</option>');
});
var opt=$("option").detach();
opt.appendTo( "select" );
var opt=$("option").detach();
opt.appendTo( "select" );
我的看法与其他答案有点不同 其目的不是隐藏选项，而是使其不可启用以保持UI的一致性 我的设想： 一个表单中有多个选项，当用户在其中一个选项中选择一个选项时，其他选项应禁用此选项，反之亦然。限制用户选择已选择的相同选项。我们通常禁用该选项，但IE 7不支持该选项。用户还可以获得添加新选择的选项 解决方案： 装载时： 如果浏览器为IE7，则在填充选择并禁用其他选择上已选择的选项时，我将向optiondata-IE7-disabled添加自定义属性，并将禁用选项的颜色更改为“CCCC”，这是禁用选项的标准颜色。这使UI在不同浏览器中看起来相同 关于变化： 我将上一个选项保存在本地变量中这将保存在焦点上 当用户试图更改选项时 用户选择一个在任何其他下拉列表中都没有选择的全新选项。然后，我循环其他选择并更改颜色，并将自定义属性添加到其他选择上的此选定选项 当用户选择一个已经选择的选项时，该选项的颜色变灰。我首先检查选项上是否有此自定义属性。如果有>我只需将该选项还原为上一个选项，并显示一条错误消息，说明该选项已被选中或B 废话 当用户将其现有选项更改为在任何其他下拉列表中未选择的全新选项时。我再次循环所有其他选择选项，并删除其上的颜色和自定义属性
希望这有帮助 您可以通过var$opt=$'select>option.clone和$'select option[value='+val+''的组合使用。删除。 还有一个例子：试试这个
在IE 11Edge中，以下代码正在运行
$("#id option[value='1']").remove();
$('<option>').val('1').text('myText').appendTo('#id');
$.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);
});
};
IIRC，你不能禁用IE6中的选项，或者IE7是在IE8 duuummbbbb中修复的！！！我非常讨厌IE。他们什么都做不好！！奇怪的文本框和密码框在默认情况下没有明显的原因都不是同一宽度！？圆角不起作用？没有正确排列的东西…我不明白！！@Mark:说真的…他们为什么还要麻烦呢？为了清楚起见，关于“禁用”方法，在jQuery中，该代码将是$custcol7选项[value=+sizeValue+]这是一个问题，如果你想在菜单的中间隐藏特定的选项，那就太多的工作试图把它们插入到原来的地方。我发现这个Ajax技术确实很好，解决了所有浏览器的不一致性。这一良好的演练解决了这个问题：@Flo:这是通过创建一个无效的DOM结构并希望浏览器能够正确处理它来实现的。坏主意。上面的OP代码现在在Chrome 62和Edge 41中运行良好。在IE 11中，它将style=display:none；设置在选项上，但实际上并不隐藏它。$'someoption.hide在FireFox和Chrome中有效，但在Internet Explorer中不起作用，EdgeI可以确认这是解决方案！虽然不兼容，但它确实有效。你真是个了不起的人！！对我来说很有魅力！这意味着只显示实际作品hide在IE中不起作用。非常感谢！这是基于@nrodic versi的更准确的插件on.Tested here:使用此方法在选择器上使用.val时要小心，因为它将返回隐藏值，而不是所选的.disabled在IE 7IE 7中不受支持…我们应该支持它吗？技术上不支持。但业务要求是的！这么多人使用如此旧版本的IE真是太疯狂了！我刚刚看到一些疯狂的browser统计数据…来吧，大家！升级！一家公司放弃了，下面是strory：对于这个问题，我成功地找到了一个解决方案，并且在3年后作为一个公开问题得到了解决。我认为我应该回答它来帮助氏族。这似乎是一个有效的HTML和简单优雅的解决方案。opt将是一个可以添加的选项元素数组使用appendTo返回到select元素。我希望这个答案可以被提升或选择为最佳答案，因为上面的其他解决方案只是让我放弃了一段时间，并且是有效的或直接的。感谢Sachin。感谢您花时间提供解决方案。不鼓励使用代码的答案。请提供一些详细信息在你的答案后面加上分词，并描述为什么你的方法比其他17个答案更可取。
$.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);
});
};
<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>