JQuery 隐藏选项在 IE 和 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8373735/
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
JQuery Hide Option doesn't work in IE and Safari
提问by James Lin
I'm trying to hide a few options in a dropdown box using .hide(). This works perfectly fine in firefox and chrome, but it doesn't work in IE and Safari. My original code is more complex but I've narrowed it down to this.
我正在尝试使用 .hide() 在下拉框中隐藏一些选项。这在 firefox 和 chrome 中运行良好，但在 IE 和 Safari 中不起作用。我的原始代码更复杂，但我已将其范围缩小到这一点。
I've tried several combinations and nothing has worked.
我尝试了几种组合，但没有任何效果。
.hide() works, but not for things within option tags for some reason.
.hide() 有效，但由于某种原因不适用于选项标签内的内容。
Can someone please help me? This is driving me nuts. Thank you so much for taking the time help!
有人可以帮帮我吗？这让我发疯。非常感谢您抽出时间帮忙！
Here's my jscript:
这是我的 jscript：
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wrapper1").hide();
});
</script>
Here's the HTML:
这是 HTML：
<label for="prodName">Product Name:</label>
<input type="text" name="prodName" /><br />
<label for="candy">Candy:</label>
<select name="candy" id="candy">
<option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. -->
<option value="1" class="wrapper1">Hide this 1</option>
<option value="2" class="wrapper1">Hide this 2</option>
<option value="3" class="wrapper2">Show this 1</option>
</select><br />
回答by John Smith
This will work.. change .show to .showOption and .hideOption. However this still kind of sucks in IE because in firefox you can make it hide an option which is selected. So if "Select One" is shown and is hidden. Firefox will still say "select one".
这将起作用.. 将 .show 更改为 .showOption 和 .hideOption。然而，这在 IE 中仍然很糟糕，因为在 Firefox 中你可以让它隐藏一个被选中的选项。因此，如果显示并隐藏“选择一个”。Firefox 仍然会说“选择一个”。
$.fn.showOption = function() {
this.each(function() {
if( this.tagName == "OPTION" ) {
var opt = this;
if( $(this).parent().get(0).tagName == "SPAN" ) {
var span = $(this).parent().get(0);
$(span).replaceWith(opt);
$(span).remove();
}
opt.disabled = false;
$(opt).show();
}
});
return this;
}
$.fn.hideOption = function() {
this.each(function() {
if( this.tagName == "OPTION" ) {
var opt = this;
if( $(this).parent().get(0).tagName == "SPAN" ) {
var span = $(this).parent().get(0);
$(span).hide();
} else {
$(opt).wrap("span").hide();
}
opt.disabled = true;
}
});
return this;
}
回答by RightSaidFred
You're right. Some browsers just won't let you hide optionelements. You'll likely need to remove them.
你是对的。有些浏览器不会让你隐藏option元素。您可能需要删除它们。
Although perhaps a better (or at least an alternate) possibility would be to disable them.
虽然也许更好（或至少是替代）的可能性是禁用它们。
$(".wrapper1").prop('disbled', true);
回答by Jim Jose
You have to remove the optionelements.. hiding them with display:noneis not supported in many browsers.
您必须删除option元素..display:none许多浏览器不支持隐藏它们。
HIDE
隐藏
var elems = $(".wrapper1").remove();
SHOW
展示
$('#candy').append(elems);
回答by Glen Little
I tried the solution that uses <span>around options, but found that it didn't work for me in all browsers.
我尝试了使用<span>around options的解决方案，但发现它不适用于所有浏览器。
I've made a jQuery Plugin that solves this very nicely. With it, you would do this:
我制作了一个 jQuery 插件，可以很好地解决这个问题。有了它，你会这样做：
$('#selection1').hideOption('1');
$('#selection1').showOption('1');
You can hide and show them as much as you want, and they will keep their original order and any .data('x')values you've assigned to the option. It works in all browsers. You can see that in this sample: jsFiddle - Toggle Dropdown Options
您可以根据需要隐藏和显示它们，它们将保持其原始顺序以及.data('x')您分配给option. 它适用于所有浏览器。您可以在此示例中看到：jsFiddle - Toggle Dropdown Options
You can get the Toggle Dropdown Options plug-in. If you don't like plug-ins, just copy the JavaScript code from it to your own project's JavaScript file. See the Read the Docslink on the plug-in for more information!
您可以获得Toggle Dropdown Options 插件。如果您不喜欢插件，只需将其中的 JavaScript 代码复制到您自己项目的 JavaScript 文件中即可。有关更多信息，请参阅插件上的阅读文档链接！
回答by Bharat Parmar
I found one workaround for this, Just wrap with Jquery wrap()) to option you want to hide,it will hidden automatically and unwrap span with unwrap() to show it again.
我找到了一种解决方法，只需使用 Jquery wrap()) 包装到您想要隐藏的选项，它将自动隐藏并使用 unwrap() 展开 span 以再次显示它。
回答by kinnu
I tried in many different ways but this solution seems reasonable and I have used in my code. No plugins required simple register function with jquery object
我尝试了很多不同的方法，但这个解决方案似乎合理，我已经在我的代码中使用了。没有插件需要使用 jquery 对象的简单注册功能
Solution at glance:
解决方案一目了然：
(function ($) {
$('#showOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', true);
});
$('#hideOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', false);
});
$.fn.showHideDropdownOptions = function(value, canShowOption) {
$(this).find('option[value="' + value + '"]').map(function () {
return $(this).parent('span').length === 0 ? this : null;
}).wrap('<span>').hide();
if (canShowOption)
$(this).find('option[value="' + value + '"]').unwrap().show();
else
$(this).find('option[value="' + value + '"]').hide();
}
})(jQuery);
Here is the complete implementation http://jsfiddle.net/8uxD7/3/
这是完整的实现http://jsfiddle.net/8uxD7/3/
