Question

我正在尝试使用.hide（）在下拉框中隐藏一些选项。这在firefox和chrome中运行得非常好，但它在IE和Safari中不起作用。我的原始代码更复杂，但我已将其缩小到这一点。

我尝试了几种组合，但没有任何效果。

.hide（）有效，但出于某种原因不适用于选项标签内的内容。

有人可以帮帮我吗？这让我疯了。非常感谢你抽出时间帮忙！

这是我的jscript：

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".wrapper1").hide();
        });
    </script>

这是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 />

Answer 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;
}

Answer 2

你是对的。有些浏览器不会让你隐藏option个元素。您可能需要删除它们。

虽然可能更好（或至少是替代）的可能性是禁用它们。

$(".wrapper1").prop('disbled', true);

Answer 3

您必须删除option元素。许多浏览器都不支持使用display:none隐藏它们。

隐藏

var elems = $(".wrapper1").remove();

SHOW

$('#candy').append(elems);

Answer 4

我尝试了围绕选项使用<span>的解决方案，但发现它在所有浏览器中都不适合我。

我已经制作了一个jQuery插件，很好地解决了这个问题。有了它，你会这样做：

$('#selection1').hideOption('1');
$('#selection1').showOption('1');

您可以根据需要隐藏和显示它们，并保留原始订单和已分配给.data('x')的所有option值。它适用于所有浏览器。您可以在此示例中看到：jsFiddle - Toggle Dropdown Options

您可以获得Toggle Dropdown Options plug-in。如果您不喜欢插件，只需将JavaScript代码复制到您自己项目的JavaScript文件中即可。有关详细信息，请参阅插件上的Read the Docs链接！

Answer 5

我找到了一个解决方法，只需用Jquery wrap（）包装到你要隐藏的选项，它会自动隐藏，并用unwrap（）展开span以再次显示它。

Answer 6

我尝试了很多不同的方法，但这个解决方案似乎很合理，我已经在我的代码中使用了。没有插件需要使用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('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

以下是完整的实施http://jsfiddle.net/8uxD7/3/

Answer 7

Safari呈现的内容有所不同，并为下拉菜单使用UI叠加层。您不仅可以隐藏它们，还可以每次从数组中刷新匹配的选项。在这里，我每次使用jQuery清除选择选项并创建新选项：

myFunction();

function myFunction() {

  //alert("dins");

    var select = document.getElementById("selectArticles");
  var options = ["NouCreus", "Pic de l'Àliga", "Puigmal", "Finestrelles", "NouFonts", "Núria Estació"];
  
    var i, L = select.options.length - 1;
  for(i = L; i >= 0; i--) {
     select.remove(i);
  }

    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("inputPatro");
    filter = input.value.toUpperCase();
  
  var el = document.createElement("option");
      el.textContent = "Vall de Núria";
      el.value = "-1";
      select.appendChild(el);

  for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    if (opt.toUpperCase().indexOf(filter) > -1) {
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      select.appendChild(el);
    }
  }
}

<input type="text" id="inputPatro" onchange="myFunction()" placeholder="Filtre per nom.." title="Escriu un patró per filtrar les opcionw del desplegable">
<select id="selectArticles">
</select>

JQuery隐藏选项在IE和Safari中不起作用

7 个答案: