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

我有一个对象，我想从select列表中隐藏/删除选项的键/值对。 下列选项select器都不起作用。 我错过了什么？

$.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

对于它的价值，第二种forms（带有@ ）在jQuery 1.3中不存在。 第一个不工作，因为你显然希望可变插值。 尝试这个：

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

请注意，如果title包含jQueryselect器元字符，这可能会以各种可怕的方式破解。

Answer 2

你不能做这个X浏览器。 如果我记得有问题。 最简单的做法是在删除项目之前保留select的复制副本，这样可以轻松删除然后追加缺失的项目。

Answer 3

这是我的旋转，由于本地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 4

我find了一个更好的方法，这很简单：

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

要再次显示，只需find该选项（不跨度）和$("option_you_want_to_show").unwrap() 。

它在Chrome和Firefox上进行了testing。

Answer 5

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

简而言之，我有一个隐藏字段#optionstore ，它按顺序存储数组（因为在JavaScript中不能有联合数组）。 然后，当您更改类别时，它将parsing现有选项（仅限第一次），将它们写入#optionstore ，擦除所有内容，然后仅放回与类别关联的选项。

注意：我创build这个允许显示给用户不同的选项值，所以它非常灵活。

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”）。 如果我们忽略它，这个选项是禁用的，但是在我们放下之前仍然显示“enabled”选项。 因此，我们将焦点转移到另一个选项来避免这种情况。

Answer 7

看看这个问题和答案 –

禁用select选项…

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

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

来自jQuery属性select器

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

编辑：

只是意识到，你正在从函数参数获得标题，在这种情况下，语法应该是

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

Answer 8

参照redsquare的build议，我最终这样做了：

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

然后扭转这一点：

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

Answer 9

你最好的select是在你想禁用的选项上设置disabled = true，然后在CSS中设置

 option:disabled { display: none; } 

这样，即使浏览器不支持隐藏禁用的项目，它仍然不能被select..但在支持它的浏览器上，它们将被隐藏。

Answer 10

问题是Internet Explorer似乎不支持隐藏和显示select选项的方法。 我想隐藏我的ddlReasonCode select中没有当前选定types的所有选项作为属性“attType”的值。

虽然可爱的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

看来你也必须更新“select”属性。 否则，当前select的选项可能会继续显示 – 虽然它可能会消失，当你真的去select一个选项（这就是它做了什么）：尝试这样做：

 $('#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

我试图从一个select列表中隐藏选项，这是基于从另一个select列表中select的选项。 它在Firefox3中工作，但不在Internet Explorer 6中。我在这里有一些想法，现在有一个解决scheme，所以我想分享：

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

为了避免string连接，你可以使用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

我使用了一个函数来实现一个解决scheme，该函数根据自定义数据属性过滤combobox（ <select> ）。 该解决scheme支持：

• 有一个<option>来显示filter何时离开select空。
• 尊重现有的选定属性。
• 没有data-filter属性的<option>元素保持不变。

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

这是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将是：

 <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

答案指出@对于较新的jQuery迭代是无效的。 虽然这是正确的，一些较老的IE浏览器仍然不隐藏选项元素。 对于任何人都必须处理这些版本中的隐藏选项元素，我在这里发布了一个解决方法：

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

基本上只是用一个跨度包装它，并在展会上取代。

Answer 17

任何人在这个问题上磕磕碰碰也可能会考虑使用Chosen ，这大大扩展了select的能力。

Answer 18

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

然后，在你的CSS确保你有

 .hidden{ display:none; } 

Answer 19

我知道这个问题已经回答了。 但是我的要求稍有不同。 而不是价值，我想按文本过滤。 所以我通过@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/>'); }); } 

这样你可以通过replace包含像这样使用值

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

Answer 20

select使用隐藏选项 ：

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

option_node是HTMLOptionElement

PS：我不使用JQuery，但猜测，这是可行的：

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

Answer 21

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

选项：select框中的索引“0”处的eq（0） – 隐藏选项。