Javascript 使用 jQuery 在 IE 中隐藏选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2031740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide select option in IE using jQuery
提问by ITRushn
Currently I am using jQuery to hide/show select options using following code.
目前我正在使用 jQuery 使用以下代码隐藏/显示选择选项。
$("#custcol7 option[value=" + sizeValue + "]").hide();
This works fine in Firefox, but doesnt do any good in other browsers. How to I hide options from select in Chrome, Opera and IE?
这在 Firefox 中工作正常，但在其他浏览器中没有任何好处。如何在 Chrome、Opera 和 IE 中隐藏选项？
回答by meder omuraliev
I just came across this and instead of cloning the entire select over and over I just replaced the options that need to be hidden with spanelements and hiding the spans ( though the browser didnt visually show them anyway, I think ) - you may need to change your code ( if complex ) to iterate through the spans for complex logic.
我刚刚遇到了这个问题，而不是一遍又一遍地克隆整个选择，我只是用span元素替换了需要隐藏的选项并隐藏了跨度（尽管浏览器并没有在视觉上显示它们，我认为）-您可能需要更改您的代码（如果复杂）迭代复杂逻辑的跨度。
The spans store a reference to the optionand replace themselves with it when they need to be shown.
跨度存储对 的引用，option并在需要显示时用它替换自己。
This code can obviously be refactored and prettified.
这段代码显然可以重构和美化。
http://fiddle.jshell.net/FAkEK/12/show/
http://fiddle.jshell.net/FAkEK/12/show/
EDIT #2 ( USE THIS INSTEAD ):It occurred to me that instead of doing all this clone/reference/replace crap, just wrap the option with a span, hide the span, and on show just replace the span with the option again..
编辑#2（使用这个代替）：我发现不是做所有这些克隆/引用/替换废话，只需用跨度包裹选项，隐藏跨度，然后在节目中再次用选项替换跨度。 .
回答by nrodic
I think mederhas provided valid answer and here it is slightly changed to reflect what works for me:
我认为meder提供了有效的答案，这里略有更改以反映对我有用的内容：
$.fn.optVisible = function( show ) {
if( show ) {
this.filter( "span > option" ).unwrap();
} else {
this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
}
return this;
}
Tested with (long live BrowserStack):
测试（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 (Sony Xperia X10)
- 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)
- 安卓 1.6（索尼 Xperia X10）
回答by Tatu Ulmanen
You don't, it's not supported in IE (and assumably not in Chrome or Opera either). You would have to remove the options altogether and add them back later if you want them to be truly invisible. But in most cases a simple disabled="disabled"should suffice and is a heck of a lot simpler than handling the removing and adding of options.
你不知道，它在 IE 中不受支持（大概也不在 Chrome 或 Opera 中）。如果您希望它们真正不可见，则必须完全删除这些选项，然后再将其添加回来。但在大多数情况下，一个简单的disabled="disabled"就足够了，而且比处理删除和添加选项要简单得多。
回答by murraybiscuit
try detach(). you can reattach it later if needed using append() or insertAfter()
尝试分离（）。如果需要，您可以稍后使用 append() 或 insertAfter() 重新附加它
回答by Sachin B. R.
To Remove options use:
要删除选项，请使用：
var opt=$("option").detach();
To show options use:
要显示选项，请使用：
opt.appendTo( "select" );
回答by JP Silvashy
Just deleted it and store it in a var in your JavaScript. You can just create the new object when you need it later.
刚刚删除它并将其存储在您的 JavaScript 中的 var 中。您可以在以后需要时创建新对象。
Otherwise try the disabledattribute mentioned above.
否则尝试disabled上面提到的属性。
回答by AuthorProxy
/**
* 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);
}
});
};
回答by Lachezar Raychev
the way you did it should work in chrome but nvm.Here is another way
你这样做的方式应该适用于 chrome 但 nvm.Here 是另一种方式
select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();
and if you want to show it again:
如果您想再次显示它：
select.append('<option value="'+sizeValue+'"></option>');
It works perfectly on every browser and its really simple code. The problem is if you want to hide several options it is more typing .. but that can be solved by putting them into variables if they don't change dynamically like that :
它适用于所有浏览器及其非常简单的代码。问题是，如果你想隐藏几个选项，它需要更多的输入......但是如果它们不像那样动态改变，可以通过将它们放入变量来解决：
var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';
select.append(options);
This way if you have to remove/append on several places you only typed the options once.Hope i gave another interesting option. Best Regards.
这样，如果您必须在多个位置删除/附加，您只需输入一次选项。希望我提供了另一个有趣的选项。此致。
回答by mstone42
There's also the the .load method:
还有 .load 方法：
s_parent.change(function(){
s_child.load('./fetch_options.php",{'v',s_parent.val()});
}
The 'fetch_options.php' script would simply print the option tags based on whatever data source you use and the parent value(s) being passed in.
'fetch_options.php' 脚本将根据您使用的任何数据源和传入的父值简单地打印选项标签。
回答by Venkata Tata
My take is bit different to other answers.
我的看法与其他答案略有不同。
The aim is not to hide the options but just make them disable(to keep the UI consistent).
目的不是隐藏选项，而只是使它们禁用（以保持 UI 一致）。
My Scenario :
我的场景：
I have multiple selects in a form and when an user selects an option in one of the selects the other selects should disable this option and vice versa. User is restricted from selecting the same option which is already selected. We normally disable the option but for IE 7 which does not support it. User also gets an option to add new selects.
我在一个表单中有多个选择，当用户在其中一个选择中选择一个选项时，其他选择应该禁用此选项，反之亦然。用户被限制选择已选择的相同选项。我们通常禁用该选项，但对于不支持它的 IE 7。用户还可以选择添加新选择。
Solution :
解决方案 ：
On load :
负载 ：
If the browser is IE7 then while populating the the selects and disabling the already selected options on other selects I am adding a custom attribute to the option("data-ie7-disabled") and also changing the color of the disabled options to '#cccccc'(which is the standard color for disabled options). This makes the UI look same across browsers.
如果浏览器是 IE7，那么在填充选择并禁用其他选择上已选择的选项时，我将向选项（“ data-ie7-disabled”）添加自定义属性，并将禁用选项的颜色更改为“ #cccccc”（这是标准禁用选项的颜色）。这使得 UI 在浏览器中看起来相同。
On Change :
更改时：
I save the previous option in a local variable(this is saved on focus).
我将上一个选项保存在局部变量中（这是保存在焦点上）。
When a user tries to change an option
当用户尝试更改选项时
User selects a complete new option which is not selected in any other dropdown. Then I loop through other selects and change the color and add custom attribute to this selected option on other selects.
When user selects an option that is already selected(The option which has grayed out color). I check if the option has this custom attribute on it first. If it has then > I simply revert the option to the previous one with an error message saying "This option is already selected or BLAH BLAH".
When user changes his existing option to a brand new option which is not selected in any other dropdown's. I again loop through all the other select options and remove the color on it and also the custom attribute.
用户选择一个完整的新选项，该选项未在任何其他下拉列表中选择。然后我遍历其他选择并更改颜色并将自定义属性添加到其他选择上的此选定选项。
当用户选择一个已经被选中的选项时（颜色变灰的选项）。我首先检查该选项是否具有此自定义属性。如果它有那么 > 我只是将选项还原为上一个选项，并显示一条错误消息，提示“此选项已被选中或 BLAH BLAH”。
当用户将其现有选项更改为未在任何其他下拉列表中选择的全新选项时。我再次遍历所有其他选择选项并删除其上的颜色以及自定义属性。
Hope this helps.
希望这可以帮助。
