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

可以跨浏览器完成;它只需要一些自定义编程。请在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 6

这适用于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 7

看看这个问题和答案 -

Disable select options...

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

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

来自jQuery attribute selectors

在大多数情况下，报价是可选的，但是应该用来避免冲突时该值包含“]”
之类的字符

修改

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

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

Answer 8

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

中设置

option:disabled {
    display: none;
}

即使浏览器不支持隐藏已禁用的项目，它仍然无法被选中..但是在做支持它的浏览器上，它们将被隐藏。

Answer 9

在参考redsquare的建议时，我最终做到了这一点：

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

然后反过来：

$("#edit-field-service-sub-cat-value").append(selectItems);

Answer 10

问题是Internet Explorer似乎不支持选择选项的隐藏和显示方法。我想隐藏我的ddlReasonCode选择的所有选项，其中没有当前选择的类型作为属性的值＆＃34; attType＆＃34;。

虽然可爱的Chrome非常满意：

//Hiding all options
            $("#ddlReasonCode").children().hide();
            //Showing only the relevant options
            $("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();

这是IE所要求的（孩子们，不要在CHROME尝试这个： - ））：

//Hiding all options
            $("#ddlReasonCode option").each(function (index, val) {
                if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType))
                    $(this).wrap('<span>').hide();
            });
            //Showing only the relevant options
            $("#ddlReasonCode option").each(function (index, val) {
                if (this.nodeName.toUpperCase() === 'OPTION') {
                    var span = $(this).parent();
                    var opt = this;
                    if ($(this).parent().is('span') && ((this).atttype == CurrentType)) {
                        $(opt).show();
                        $(span).replaceWith(opt);
                    }
                }
            });

我在http://ajax911.com/hide-options-selecbox-jquery/

找到了包装的想法

Answer 11

您似乎还必须更新“已选择”属性。否则，当前选择的选项可能会继续显示 - 虽然它实际上可能会在您选择一个选项时消失（这就是它为我做了什么）：试着这样做：

$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected"); //this may be overkill.
$('#mySelector').children('option[value="'+SelVal+'"]').show();  
$('#mySelector').children(':visible').attr('selected','selected'); //assuming that something is still on the list.

Answer 12

我试图根据另一个选择列表中的选定选项隐藏一个选择列表中的选项。它在Firefox3中工作，但在Internet Explorer 6中没有。我在这里有一些想法，现在有一个解决方案，所以我想分享一下：

JavaScript代码

function change_fruit(seldd) {
    var look_for_id=''; var opt_id='';
    $('#obj_id').html("");
    $("#obj_id").append("<option value='0'>-Select Fruit-</option>");
    if(seldd.value=='0') {
        look_for_id='N';
    }
    if(seldd.value=='1'){
        look_for_id='Y';
        opt_id='a';
    }
    if(seldd.value=='2') {
        look_for_id='Y';
        opt_id='b';
    }
    if(seldd.value=='3') {
        look_for_id='Y';
        opt_id='c';
    }

    if(look_for_id=='Y') {
        $("#obj_id_all option[id='"+opt_id+"']").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
    else {
        $("#obj_id_all option").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
}

HTML

<select name="obj_id" id="obj_id">
    <option value="0">-Select Fruit-</option>
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
    <option value="0">All</option>
    <option value="1">Starts with A</option>
    <option value="2">Starts with B</option>
    <option value="3">Starts with C</option>
</select>

<select name="obj_id_all" id="obj_id_all" style="display:none;">
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

已在Firefox 3和Internet Explorer 6中检查过它。

Answer 13

为避免字符串连接，您可以使用jQuery.grep

$($.grep($("#edit-field-service-sub-cat-value option"),
         function(n,i){
           return n.value==title;
         })
 ).hide()

Answer 14

可能不像jquery插件那样优雅或可重用。但另一种方法是简单地保存选项元素并根据需要交换它们：

var SelectFilter = function ()
        {
            this.allOptions = $("#someSelect option");

            this.fooBarOptions= $("#someSelect option[value='foo']");
            this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value='bar']"));


            this.showFooBarOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.fooBarOptions);
            };
            this.showAllOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.allOptions);
            };



        };

这样做是为了使用对象：

var filterObject = new SelectFilter();
filterObject.showFooBarOptions ();

Answer 15

我使用一个基于自定义数据属性过滤组合框（<select>）的函数实现了一个解决方案。该解决方案支持：

让<option>显示过滤器何时将选择为空。
尊重现有的选定属性。
<option>没有数据过滤器属性的元素保持不变。

使用jQuery 2.1.4和Firefox，Chrome，Safari和IE 10 +进行测试。

这是HTML示例：

<select id="myCombobox">
  <option data-filter="1" value="AAA">Option 1</option>
  <option data-filter="1" value="BBB">Option 2</option>
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
  <option data-filter="3" value="EEE">Option 5</option>
  <option data-filter="3" value="FFF">Option 6</option>
  <option data-filter-emptyvalue disabled>No Options</option>
</select>

过滤的jQuery代码：

function filterCombobox(selectObject, filterValue, autoSelect) {

  var fullData = selectObject.data("filterdata-values");
  var emptyValue = selectObject.data("filterdata-emptyvalue");

  // Initialize if first time.
  if (!fullData) {
    fullData = selectObject.find("option[data-filter]").detach();
    selectObject.data("filterdata-values", fullData);
    emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
    selectObject.data("filterdata-emptyvalue", emptyValue);
    selectObject.addClass("filtered");
  }
  else {
    // Remove elements from DOM
    selectObject.find("option[data-filter]").remove();
    selectObject.find("option[data-filter-emptyvalue]").remove();
  }

  // Get filtered elements.
  var toEnable = fullData.filter("option[data-filter][data-filter='" + filterValue + "']");

  // Attach elements to DOM
  selectObject.append(toEnable);

  // If toEnable is empty, show empty option.
  if (toEnable.length == 0) {
    selectObject.append(emptyValue);
  }

  // Select First Occurrence
  if (autoSelect) {
    var obj = selectObject.find("option[selected]");
    selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
  }
}

要使用它，只需使用您想要保留的值调用该函数。

filterCombobox($("#myCombobox"), 2, true);

然后得到的选择将是：

<select id="myCombobox">
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
</select>

原始元素由data（）函数存储，因此后续调用将添加和删除正确的元素。

Answer 16

经过测试，上面各种方法（包括混乱）发布的隐藏元素解决方案现在都可以在最新版本的Firefox（66.0.4），Chrome（74.0.3729.169）和Edge（42.17134.1.0）中使用

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

Answer 17

答案指出@对于较新的jQuery迭代无效。虽然这是正确的，但一些较旧的IE仍然不会隐藏选项元素。对于那些必须处理受影响的那些版本中的选项元素的人，我在这里发布了一个解决方法：

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/

基本上只用一个跨度包裹它并替换show。

Answer 18

任何绊倒这个问题的人都可能会考虑使用Chosen，这极大地扩展了选择的能力。

Answer 19

$("option_you_want_to_hide").addClass('hidden')

然后，在你的CSS中确保你有

.hidden{
    display:none;
}

Answer 20

我知道这个问题已得到解答。但我的要求略有不同。而不是价值我想要按文字过滤。所以我修改了@William Herry这样的答案。

var array = ['Administration', 'Finance', 'HR', 'IT', 'Marketing', 'Materials', 'Reception', 'Support'];
if (somecondition) {
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").unwrap();
   });
}
else{
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").wrap('<span/>');
   });
}

这样你也可以通过替换像这样的

来使用值

 $("div#ovrcateg option[value=" + this + "]").wrap('<span/>');

Answer 21

对于选择中的隐藏选项，请使用：

option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item

option_node 的位置 HTMLOptionElement

P.S。：我不使用JQuery，但猜测它会起作用：

$('.my_select option[value="my_cool_value"]').hidden = true

Answer 22

我发现最好完全删除DOM。

$(".form-group #selectId option[value='39']").remove();

跨浏览器兼容。也适用于IE11

Answer 23

您可以显示/隐藏具有值或班级的名称。检查下面带有工作示例的链接。
Show/hide jquery chosen options with value or with class name.

Answer 24

$（'＃id'）。val（$（'＃id选项：eq（0）'）。hide（））;

选项：选择框中索引为“0”的eq（0）-hide选项。

Answer 25

$（“＃ddtypeoftraining选项[value = 5]”）。css（“ display”，“ none”）; $（'＃ddtypeoftraining'）。selectpicker（'refresh'）;

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

25 个答案:

JavaScript代码

HTML