JQuery Hide Option在IE和Safari中不起作用
我试图使用.hide（）在下拉框中隐藏一些选项。 这在firefox和chrome中运行得非常好，但它在IE和Safari中不起作用。 我的原始代码更复杂，但我已将其缩小到这个范围。
我尝试了几种组合，没有任何效果。
.hide（）有效，但出于某种原因不适用于选项标签内的内容。
有人可以帮帮我吗？ 这让我疯了。 非常感谢你抽出时间帮忙！
这是我的jscript：
$(document).ready(function(){ $(".wrapper1").hide(); }); 这是HTML：
Hide this 1 Hide this 2 Show this 1
这将有效..改变.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; }
你是对的。 有些浏览器不会让你隐藏option元素。 您可能需要删除它们。
虽然可能更好（或至少是替代）的可能性是禁用它们。
$(".wrapper1").prop('disbled', true);
您必须删除option元素..使用display:none隐藏它们display:none在许多浏览器中不支持display:none 。
隐藏
var elems = $(".wrapper1").remove();
节目
$('#candy').append(elems);
我尝试了使用 around选项的解决方案，但发现它在所有浏览器中都不适合我。
我做了一个jQuery插件，很好地解决了这个问题。 有了它，你会这样做：
$('#selection1').hideOption('1'); $('#selection1').showOption('1');
您可以根据需要隐藏和显示它们，并且它们将保留原始顺序以及您为该option指定的任何.data('x')值。 它适用于所有浏览器。 您可以在此示例中看到： jsFiddle – 切换下拉选项
您可以获得Toggle Dropdown Options插件 。 如果您不喜欢插件，只需将JavaScript代码复制到您自己项目的JavaScript文件中即可。 有关详细信息，请参阅插件上的“ 阅读文档”链接！
我找到了一个解决方法，只需用Jquery wrap（）包装到你想隐藏的选项，它会自动隐藏，并用unwrap（）展开span以再次显示它。
我试过很多不同的方法，但这个解决方案似乎很合理，我在我的代码中使用过。 没有插件需要使用jquery对象的简单注册函数
解决方案一览：
(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('').hide(); if (canShowOption) $(this).find('option[value="' + value + '"]').unwrap().show(); else $(this).find('option[value="' + value + '"]').hide(); } })(jQuery);
这是完整的实现http://jsfiddle.net/8uxD7/3/