使用jQuery隐藏选择列表中的选项

Question

我有一个对象,我想要隐藏/删除选择列表中的键/值对选项.以下选项都不起作用.我错过了什么？

$.each(results['hide'], function(name, title) {                     
  $("#edit-field-service-sub-cat-value option[value=title]").hide();
  $("#edit-field-service-sub-cat-value option[@value=title]").hide();
}); 

Answer 1

对于它的价值,@jQuery 1.3中不存在第二种形式(带有).第一个不起作用,因为你显然期望变量插值.试试这个:

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();

请注意,如果title包含jQuery选择器元字符,这可能会以各种可怕的方式中断.

Answer 2

你不能做这个x浏览器.如果我记得即有问题.最简单的方法是在删除项目之前保留选择的克隆副本,这样您就可以轻松删除然后将缺少的项目追加回去.

Answer 3

我发现了一种更好的方法,而且非常简单:

$("option_you_want_to_hide").wrap('<span/>')

要再次显示,只需找到该选项(不是跨度)和$("option_you_want_to_show").unwrap().

它在Chrome和Firefox 上进行了测试.

Answer 4

这是我的旋转,由于本机DOM方法可能会快一点

$.each(results['hide'], function(name, title) {                     
    $(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
      if( option.value == title ) {
        option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
      }
    });
});

Answer 5

这适用于Firefox 3.0,但不适用于MSIE 8,也不适用于Opera 9.62:

jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');

但是隐藏一个选项,可以简单地禁用它:

jQuery('#destinations').val('2'); 
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');

上面两行中的第一行用于Firefox并将焦点传递给第二个选项(假设它具有值="2").如果省略它,则禁用该选项,但在我们将其删除之前仍会显示"启用"选项.因此,我们将焦点转移到另一个选项以避免这种情况.

Answer 6

它可以跨浏览器完成; 它只需要一些自定义编程.请在http://jsfiddle.net/sablefoste/YVMzt/6/上查看我的小提琴.它经过测试可在Chrome,Firefox,Internet Explorer和Safari中使用.

简而言之,我有一个隐藏字段,#optionstore它按顺序存储数组(因为你不能在JavaScript中使用关联数组).然后,当您更改类别时,它会解析现有选项(仅限第一次)将其写入#optionstore,删除所有内容,并仅放回与该类别关联的选项.

注意:我创建此项以允许显示给用户的文本中的不同选项值,因此它非常灵活.

HTML:

<p id="choosetype">
    <div>
        Food Category:
    </div>
    <select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
        <option value="">All Food</option>
        <option value="Food1">Fruit</option>
        <option value="Food2">Veggies</option>
        <option value="Food3">Meat</option>
        <option value="Food4">Dairy</option>
        <option value="Food5">Bread</option>
    </select>
    <div>
        Food Selection
    </div>
    <select name="foodType" id="foodType" size="1">
        <option value="Fruit1" class="sub-Food1">Apples</option>
        <option value="Fruit2" class="sub-Food1">Pears</option>
        <option value="Fruit3" class="sub-Food1">Bananas</option>
        <option value="Fruit4" class="sub-Food1">Oranges</option>
        <option value="Veg1" class="sub-Food2">Peas</option>
        <option value="Veg2" class="sub-Food2">Carrots</option>
        <option value="Veg3" class="sub-Food2">Broccoli</option>
        <option value="Veg4" class="sub-Food2">Lettuce</option>
        <option value="Meat1" class="sub-Food3">Steak</option>
        <option value="Meat2" class="sub-Food3">Chicken</option>
        <option value="Meat3" class="sub-Food3">Salmon</option>
        <option value="Meat4" class="sub-Food3">Shrimp</option>
        <option value="Meat5" class="sub-Food3">Tuna</option>
        <option value="Meat6" class="sub-Food3">Pork</option>
        <option value="Dairy1" class="sub-Food4">Milk</option>
        <option value="Dairy2" class="sub-Food4">Cheese</option>
        <option value="Dairy3" class="sub-Food4">Ice Cream</option>
        <option value="Dairy4" class="sub-Food4">Yogurt</option>
        <option value="Bread1" class="sub-Food5">White Bread</option>
        <option value="Bread2" class="sub-Food5">Panini</option>
    </select>
    <span id="optionstore" style="display:none;"></span>
</p>

JavaScript/jQuery:

$(document).ready(function() {
    $('#category').on("change", function() {
        var cattype = $(this).val();
        optionswitch(cattype);
    });
});

function optionswitch(myfilter) {
    //Populate the optionstore if the first time through
    if ($('#optionstore').text() == "") {
        $('option[class^="sub-"]').each(function() {
            var optvalue = $(this).val();
            var optclass = $(this).prop('class');
            var opttext = $(this).text();
            optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
            $('#optionstore').text(optionlist);
        });
    }

    //Delete everything
    $('option[class^="sub-"]').remove();

    // Put the filtered stuff back
    populateoption = rewriteoption(myfilter);
    $('#foodType').html(populateoption);
}

function rewriteoption(myfilter) {
    //Rewrite only the filtered stuff back into the option
    var options = $('#optionstore').text().split('@%');
    var resultgood = false;
    var myfilterclass = "sub-" + myfilter;
    var optionlisting = "";

    myfilterclass = (myfilter != "")?myfilterclass:"all";

    //First variable is always the value, second is always the class, third is always the text
    for (var i = 3; i < options.length; i = i + 3) {
        if (options[i - 1] == myfilterclass || myfilterclass == "all") {
            optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
            resultgood = true;
        }
    }
    if (resultgood) {
        return optionlisting;
    }
}

Answer 7

看看这个问题和答案——

禁用选择选项...

查看您的代码，您可能需要引用属性值

$("#edit-field-service-sub-cat-value option[value='title']").hide();

来自jQuery 属性选择器

在大多数情况下，引号是可选的，但当值包含“]”等字符时，应使用引号以避免冲突

编辑：

刚刚意识到您正在从函数参数中获取标题，在这种情况下，语法应该是

$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();

Answer 8

最好的选择是在要禁用的选项项上设置disable = true，然后在CSS中设置

option:disabled {
    display: none;
}

这样，即使浏览器不支持隐藏禁用的项目，但它仍然无法选择。但对浏览器不支持的话，他们将被隐藏。

Answer 9

经过测试，上面发布的各种隐藏元素（包括 Chaos）的解决方案现在可以在最新版本的 Firefox (66.0.4)、Chrome (74.0.3729.169) 和 Edge (42.17134.1.0) 中运行

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
$("#edit-field-service-sub-cat-value option[value=" + title + "]").show();

对于 IE，这不起作用，但是您可以禁用该选项

$("#edit-field-service-sub-cat-value option[value=" + title + "]").attr("disabled", "disabled");
$("#edit-field-service-sub-cat-value option[value=" + title + "]").removeAttr("disabled");

然后强制选择不同的值。

$("#edit-field-service-sub-cat-value").val("0");

请注意，对于禁用的选项，下拉列表的值现在将为空，而不是所选选项的值（如果禁用）。