blocks|key|1263762|text|无论如何，第二种形式(带有@)在jQuery+1.3中不存在。第一种方法不起作用，因为您显然希望使用变量插值。试试这个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1263763|$("#edit-field-service-sub-cat-value+option[value="+%2B+title+%2B+"]").hide();|code-block|syntax|javascript|1263764|请注意，如果title包含jQuery选择器元字符，这可能会以各种可怕的方式中断。|1263765|entityMap^0|D|1|0|0|6|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

For what it's worth, the second form (with the <code>@</code>) doesn't exist in jQuery 1.3. The first isn't working because you're apparently expecting variable interpolation. Try this:

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

Note that this will probably break in various hideous ways if <code>title</code> contains jQuery selector metacharacters.

blocks|key|1263805|text|您无法执行此x-browser操作。如果我记得ie有问题的话。最简单的做法是在删除项之前保留select的克隆副本，这使您可以轻松地删除丢失的项，然后将其追加回去。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263806|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You cannot do this x-browser. If I recall ie has issues. The easiest thing to do is keep a cloned copy of the select before you remove items, this allows you to easily remove and then append the missing items back.

blocks|key|1264115|text|我找到了一个更好的方法，而且很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264116|$("option_you_want_to_hide").wrap('')|code-block|syntax|javascript|1264117|要再次显示，只需找到该选项(而不是span)和$("option_you_want_to_show").unwrap()。|offset|length|style|CODE|1264118|它在Chrome和火狐上进行了测试。|1264119|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Google_Chrome^0|0|0|N|11|0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I found a better way, and it is very simple:

<pre><code>$("option_you_want_to_hide").wrap('&lt;span/&gt;')
</code></pre>

To show again, just find that option(not span) and <code>$("option_you_want_to_show").unwrap()</code>.

It was tested on <a href="http://en.wikipedia.org/wiki/Google_Chrome">Chrome</a> and Firefox.

blocks|key|1264056|text|这里是我的spin，由于原生DOM方法，可能会更快一些|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264057|$.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();
++++++}
++++});
});|code-block|syntax|javascript|1264058|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is my spin, likely a bit faster due to native DOM methods

<pre><code>$.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();
 }
 });
});
</code></pre>

blocks|key|1478543|text|这在Firefox+3.0中有效，但不适用于MSIE+8，也不适用于Opera+9.62：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478544|jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');|code-block|syntax|javascript|1478545|而不是隐藏一个选项，可以简单地禁用它：|1478546|jQuery('#destinations').val('2');+
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');|1478547|上面两行中的第一行用于火狐，并将焦点传递给第二个选项(假设它的value=为“2”)。如果省略它，该选项将被禁用，但在我们下拉它之前，仍会显示"enabled“选项。因此，我们将焦点转移到另一个选项来避免这种情况。|1478548|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This works in Firefox 3.0, but not in MSIE 8, nor in Opera 9.62:

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

But rather hiding an option, one can simply disable it:

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

The first of the the two lines above is for Firefox and pass focus to the 2nd option (assuming it has value="2"). If we omit it, the option is disabled, but the still displays the "enabled" option before we drop it down. Hence, we pass focus to another option to avoid this.

blocks|key|1264015|text|参考redsquare的建议，我最终这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264016|var+selectItems+=+$("#edit-field-service-sub-cat-value+option[value="+%2B+title+%2B+"]").detach();|code-block|syntax|javascript|1264017|然后反转过来：|1264018|$("#edit-field-service-sub-cat-value").append(selectItems);|1264019|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In reference to redsquare's suggestion, I ended up doing this:

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

and then to reverse this:

<pre><code>$("#edit-field-service-sub-cat-value").append(selectItems);
</code></pre>

blocks|key|1478859|text|问题是Internet+Explorer似乎不支持选择选项的隐藏和显示方法。我想隐藏我的ddlReasonCode选择的所有选项，这些选项没有将当前选择的类型作为属性"attType“的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478860|虽然可爱的Chrome对以下内容相当满意：|1478861|//Hiding+all+options
++++++++++++$("#ddlReasonCode").children().hide();
++++++++++++//Showing+only+the+relevant+options
++++++++++++$("#ddlReasonCode").children("option[atttype=\""+%2B+CurrentType+%2B+"\"]").show();|code-block|syntax|javascript|1478862|这是IE的要求(孩子们，不要在CHROME上尝试这个:-))：|1478863|//Hiding+all+options
++++++++++++$("#ddlReasonCode+option").each(function+(index,+val)+{
++++++++++++++++if+($(this).is('option')+&&+(!$(this).parent().is('span'))+&&+($(this).atttype+!=+CurrentType))
++++++++++++++++++++$(this).wrap('').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);
++++++++++++++++++++}
++++++++++++++++}
++++++++++++});|1478864|我在http://ajax911.com/hide-options-selecbox-jquery/找到了包装的想法|offset|length|1478865|entityMap|0|LINK|mutability|MUTABLE|url|http://ajax911.com/hide-options-selecbox-jquery/^0|0|0|0|0|0|2|1C|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

The problem is that Internet Explorer does not seem to support the hide and show methods for select options.
I wanted to hide all options of my ddlReasonCode select which did not have the currently selected type as the value of the attribute "attType".

While the lovely Chrome was quite satisfied with:

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

This is what IE required (kids, don't try this at CHROME :-)):

<pre><code>//Hiding all options
 $("#ddlReasonCode option").each(function (index, val) {
 if ($(this).is('option') &amp;&amp; (!$(this).parent().is('span')) &amp;&amp; ($(this).atttype != CurrentType))
 $(this).wrap('&lt;span&gt;').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') &amp;&amp; ((this).atttype == CurrentType)) {
 $(opt).show();
 $(span).replaceWith(opt);
 }
 }
 });
</code></pre>

I found that wrapping idea at <a href="http://ajax911.com/hide-options-selecbox-jquery/" rel="nofollow">http://ajax911.com/hide-options-selecbox-jquery/</a>

blocks|key|1479282|text|经过测试，上面发布的各种解决方案，包括chaos，现在可以在最新版本的Firefox+(66.0.4)，Chrome+(74.0.3729.169)和Edge+(42.17134.1.0)中隐藏元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479283|$("#edit-field-service-sub-cat-value+option[value="+%2B+title+%2B+"]").hide();
$("#edit-field-service-sub-cat-value+option[value="+%2B+title+%2B+"]").show();|code-block|syntax|javascript|1479284|对于IE，这不起作用，但是您可以禁用该选项|1479285|$("#edit-field-service-sub-cat-value+option[value="+%2B+title+%2B+"]").attr("disabled",+"disabled");
$("#edit-field-service-sub-cat-value+option[value="+%2B+title+%2B+"]").removeAttr("disabled");|1479286|然后强制选择不同的值。|1479287|$("#edit-field-service-sub-cat-value").val("0");|1479288|请注意，对于已禁用的选项，下拉菜单的val现在将为null，而不是所选选项的值(如果已禁用)。|1479289|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Having tested, the solutions posted above by various, including chaos, to hide elements do now work in the latest versions of Firefox (66.0.4), Chrome (74.0.3729.169) and Edge (42.17134.1.0)

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

For IE, this does not work, however you can disable the option

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

and then force the selection of a different value.

<pre><code>$("#edit-field-service-sub-cat-value").val("0");
</code></pre>

Note, for a disabled option, the val of the drop down will now be null, not the value of the selected option if it is disabled.

blocks|key|1478446|text|我试图根据从一个选择列表中选择的选项来隐藏另一个选择列表中的选项。我在这里得到了一些想法，现在有了一个解决方案，所以我想分享一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478447|JavaScript代码|1478448|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='"%2Bopt_id%2B"']").each(function()+{
++++++++++$("#obj_id").append("<option+value='"%2B$(this).val()%2B"'>"%2B$(this).text()%2B"</option>");
++++++++});
++++}
++++else+{
++++++++$("#obj_id_all+option").each(function()+{
++++++++++$("#obj_id").append("<option+value='"%2B$(this).val()%2B"'>"%2B$(this).text()%2B"</option>");
++++++++});
++++}
}|code-block|syntax|javascript|1478449|HTML|1478450|<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>|1478451|它被检查为在Firefox+3和Internet+Explorer+6中工作。|1478452|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I was trying to hide options from one select-list based on the selected option from another select-list. It was working in Firefox3, but not in Internet&nbsp;Explorer 6. I got some ideas here and have a solution now, so I would like to share:

<h2>The JavaScript code</h2>

<pre><code>function change_fruit(seldd) {
 var look_for_id=''; var opt_id='';
 $('#obj_id').html("");
 $("#obj_id").append("&lt;option value='0'&gt;-Select Fruit-&lt;/option&gt;");
 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("&lt;option value='"+$(this).val()+"'&gt;"+$(this).text()+"&lt;/option&gt;");
 });
 }
 else {
 $("#obj_id_all option").each(function() {
 $("#obj_id").append("&lt;option value='"+$(this).val()+"'&gt;"+$(this).text()+"&lt;/option&gt;");
 });
 }
}
</code></pre>

<h2>The HTML</h2>

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

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

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

It was checked as working in Firefox 3 and Internet&nbsp;Explorer 6.

blocks|key|1478497|text|似乎您还必须更新"selected“属性。否则，当前选择的选项可能会继续显示-尽管当您实际选择一个选项时，它可能会消失(这就是它为我所做的)：尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478498|$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected");+//this+may+be+overkill.
$('#mySelector').children('option[value="'%2BSelVal%2B'"]').show();++
$('#mySelector').children(':visible').attr('selected','selected');+//assuming+that+something+is+still+on+the+list.|code-block|syntax|javascript|1478499|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It seems that you also have to update the "selected" attribute. Otherwise the currently selected option may continue to display - although it probably will go away when you actually go to select an option (thats what it did for me):
Try doing this:

<pre><code>$('#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.
</code></pre>

blocks|key|1263993|text|要避免字符串连接，可以使用jQuery.grep|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1263994|$($.grep($("#edit-field-service-sub-cat-value+option"),
+++++++++function(n,i){
+++++++++++return+n.value==title;
+++++++++})
+).hide()|code-block|syntax|javascript|1263995|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.grep/^0|D|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

To avoid string concatenation you can use <a href="http://api.jquery.com/jQuery.grep/" rel="nofollow">jQuery.grep</a>

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

blocks|key|1264374|text|可能不像jquery插件那样优雅或可重用。但另一种方法是简单地保存选项元素，并根据需要将它们交换出来：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264375|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);
++++++++++++};



++++++++};|code-block|syntax|javascript|1264376|执行此操作以使用对象：|1264377|var+filterObject+=+new+SelectFilter();
filterObject.showFooBarOptions+();+|1264378|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Probably not as elegant or as reusable as a jquery plugin. but another approach is to simply save option elements and swap them out as required:

<pre><code>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);
 };



 };
</code></pre>

do this to use the object:

<pre><code>var filterObject = new SelectFilter();
filterObject.showFooBarOptions (); 
</code></pre>

blocks|key|1479041|text|$("option_you_want_to_hide").addClass('hidden')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1479042|然后，在你的css中，确保你有|unstyled|1479043|.hidden{
++++display:none;
}|1479044|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$("option_you_want_to_hide").addClass('hidden')
</code></pre>

Then, in your css make sure you have

<pre><code>.hidden{
 display:none;
}
</code></pre>

blocks|key|1478575|text|答案指出对于较新的jQuery迭代，@是无效的。虽然这是正确的，但一些较老的IE仍然不会隐藏option元素。对于那些必须在受影响的版本中隐藏选项元素的人，我在这里发布了一个解决方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1478576|http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/|1478577|基本上，只需要用span包装它，并在展示时替换它。|1478578|entityMap|0|LINK|mutability|MUTABLE|url^0|I|1|0|0|1V|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

The answer points out that <code>@</code> is invalid for newer jQuery iterations. While that's correct, some older IEs still dont hide option elements. For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here:

<a href="http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/" rel="nofollow">http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/</a>

Basically just wrap it with a span and replace on show.

blocks|key|1264151|text|遇到这个问题的任何人也可以考虑使用Chosen，它极大地扩展了selects的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1264152|entityMap|0|LINK|mutability|MUTABLE|url|http://harvesthq.github.io/chosen/^0|H|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Anybody stumbling across this question might also consider the use of <a href="http://harvesthq.github.io/chosen/" rel="nofollow">Chosen</a>, which greatly expands the capabilities of selects.

blocks|key|1479131|text|我知道这个问题已经得到了回答。但我的要求略有不同。我想要按文本过滤，而不是值。所以我修改了@William+Herry的答案，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479132|var+array+=+['Administration',+'Finance',+'HR',+'IT',+'Marketing',+'Materials',+'Reception',+'Support'];
if+(somecondition)+{
+++$(array).each(function+()+{
+++++++$("div#deprtmnts+option:contains("+%2B+this+%2B+")").unwrap();
+++});
}
else{
+++$(array).each(function+()+{
+++++++$("div#deprtmnts+option:contains("+%2B+this+%2B+")").wrap('');
+++});
}|code-block|syntax|javascript|1479133|这样，您还可以通过替换如下所示的contains来使用值|1479134|+$("div#ovrcateg+option[value="+%2B+this+%2B+"]").wrap('');|1479135|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I know this question has been answered. But my requirement was slightly different. Instead of value I wanted to filter by text. So i modified the answer by @William Herry like this.

<pre><code>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('&lt;span/&gt;');
 });
}
</code></pre>

This way you can use value also by replacing contains like this

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

blocks|key|1479179|text|+$('#id').val($('#id+option:eq(0)').hide());|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1479180|option:eq(0)-hide选项，位于选择框中的索引'0‘处。|unstyled|1479181|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> $('#id').val($('#id option:eq(0)').hide());
</code></pre>

option:eq(0)-hide option at index '0' in select box.

blocks|key|1264709|text|$("#ddtypeoftraining+optionvalue=5").css("display"，"none")；$('#ddtypeoftraining').selectpicker('refresh')；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264710|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

$("#ddtypeoftraining option[value=5]").css("display", "none");
$('#ddtypeoftraining').selectpicker('refresh');

blocks|key|1264611|text|我发现最好的方法就是完全删除DOM。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264612|$(".form-group+#selectId+option[value='39']").remove();|code-block|syntax|javascript|1264613|跨浏览器兼容。也可以在IE11上工作|1264614|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found it best to just remove the DOM completely.

<pre><code>$(".form-group #selectId option[value='39']").remove();
</code></pre>

Cross browser compatible. Works on IE11 too

I have an object with key/value pairs of options I want to hide/remove from a select list.
Neither of the following option selectors work. What am I missing?

<pre><code>$.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();
}); 
</code></pre>

Hide options in a select list using jQuery

jQuery

我有一个带有键/值对的对象，我想要从选择列表中隐藏/删除这些选项。以下两个选项选择器都不起作用。我遗漏了什么？$.each(results['hide'], function(name, title) {                       $("#edit-field-service-sub-cat-value option[value=title]").hide();  $("#edi

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

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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