blocks|key|1363892|text|你不需要，IE不支持它(想必Chrome和Opera也不支持)。如果您希望这些选项真正不可见，则必须完全删除这些选项，然后再将它们添加回来。但在大多数情况下，一个简单的disabled="disabled"应该就足够了，而且比处理选项的删除和添加要简单得多。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1363893|entityMap^0|2C|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You don't, it's not supported in IE (and assumably not in Chrome or Opera either). You would have to remove the options altogether and add them back later if you want them to be truly invisible. But in most cases a simple <code>disabled="disabled"</code> should suffice and is a heck of a lot simpler than handling the removing and adding of options.

blocks|key|1148942|text|尝试使用detach()。如果需要，您可以稍后使用append()或insertAfter()重新附加它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1148943|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|$]]

try detach().
you can reattach it later if needed using append() or insertAfter()

blocks|key|1149237|text|要删除选项，请使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149238|var+opt=$("option").detach();|code-block|syntax|javascript|1149239|要显示选项，请使用：|1149240|opt.appendTo(+"select"+);|1149241|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|$]]

To Remove options use:

<pre><code>var opt=$("option").detach();
</code></pre>

To show options use:

<pre><code>opt.appendTo( "select" );
</code></pre>

blocks|key|1148901|text|只需删除它并将其存储在您的JavaScript中的一个变量中。您可以在以后需要时创建新对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1148902|否则，请尝试上面提到的disabled属性。|offset|length|style|CODE|1148903|entityMap^0|0|B|8|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Just deleted it and store it in a var in your JavaScript. You can just create the new object when you need it later.

Otherwise try the <code>disabled</code> attribute mentioned above.

blocks|key|1148998|text|/**
*+Change+visibility+of+select+list+option+elements
*+@param++{boolean}+++stateVal++++++show+hidden+options+if+true;+hide+it+otherwise.+If+not+setted+then+toggle+visibility,+based+on+it's+current+state
*/
$.fn.toggleOptionVisibility+=+function+(stateVal)+{
++++var+isBool+=+typeof+stateVal+===+"boolean";
++++return+this.each(function+()+{
+++++++++var+$this+=+$(this);
+++++++++if+(isBool)+{
+++++++++++++if+(stateVal)+$this.filter("span+>+option").unwrap();
+++++++++++++else+$this.filter(":not(span+>+option)").wrap("").parent().hide();
+++++++++}
+++++++++else+{
+++++++++++++$this.filter("span+>+option").toggleOptionVisibility(true);
+++++++++++++$this.filter(":not(span+>+option)").toggleOptionVisibility(false);
++++++++}
++++});
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1148999|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>/**
* Change visibility of select list option elements
* @param {boolean} stateVal show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state
*/
$.fn.toggleOptionVisibility = function (stateVal) {
 var isBool = typeof stateVal === "boolean";
 return this.each(function () {
 var $this = $(this);
 if (isBool) {
 if (stateVal) $this.filter("span &gt; option").unwrap();
 else $this.filter(":not(span &gt; option)").wrap("&lt;span&gt;").parent().hide();
 }
 else {
 $this.filter("span &gt; option").toggleOptionVisibility(true);
 $this.filter(":not(span &gt; option)").toggleOptionVisibility(false);
 }
 });
};
</code></pre>

blocks|key|1364020|text|您使用的方法在chrome中应该可以工作，但nvm.Here是另一种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1364021|select+=+$('#custcol7');
select.find('option[value=["'%2BsizeValue+%2B'"]').remove();|code-block|syntax|javascript|1364022|如果你想再放映一遍：|1364023|select.append('<option+value="'%2BsizeValue%2B'"></option>');|1364024|它在每个浏览器上都能完美地工作，并且它的代码非常简单。问题是，如果您想隐藏几个选项，则需要键入更多内容。但这可以通过将它们放入变量来解决，如果它们不像这样动态变化的话：|1364025|var+options+=+'<option+value="'%2BsizeValue1%2B'"></option><option+value="'%2BsizeValue2%2B'"></option><option+value="'%2BsizeValue3%2B'"></option>';

select.append(options);|1364026|这样，如果你必须在几个地方移除/追加，你只需要输入选项once.Hope，我给出了另一个有趣的选项。诚挚的问候。|1364027|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|$]]

the way you did it should work in chrome but nvm.Here is another way

<pre><code>select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();
</code></pre>

and if you want to show it again:

<pre><code>select.append('&lt;option value="'+sizeValue+'"&gt;&lt;/option&gt;');
</code></pre>

It works perfectly on every browser and its really simple code. The problem is if you want to hide several options it is more typing .. but that can be solved by putting them into variables if they don't change dynamically like that : 

<pre><code>var options = '&lt;option value="'+sizeValue1+'"&gt;&lt;/option&gt;&lt;option value="'+sizeValue2+'"&gt;&lt;/option&gt;&lt;option value="'+sizeValue3+'"&gt;&lt;/option&gt;';

select.append(options);
</code></pre>

This way if you have to remove/append on several places you only typed the options once.Hope i gave another interesting option. Best Regards.

blocks|key|1363980|text|还有.load方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1363981|s_parent.change(function(){
+++s_child.load('./fetch_options.php",{'v',s_parent.val()});
}|code-block|syntax|javascript|1363982|'fetch_options.php‘脚本将根据您使用的任何数据源和传入的父值打印选项标记。|1363983|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|$]]

There's also the the .load method:

<pre><code>s_parent.change(function(){
 s_child.load('./fetch_options.php",{'v',s_parent.val()});
}
</code></pre>

The 'fetch_options.php' script would simply print the option tags based on whatever data source you use and the parent value(s) being passed in.

blocks|key|1149160|text|使用AuthorProxy提供的解决方案，它在IE上工作得很好，但是当我尝试在火狐的下拉列表上执行.val()时，我得到了一些奇怪的值，这些值没有任何意义。我已经修改了他们的选项，包括浏览器特定的功能，隐藏/显示firefox的工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149161|$.fn.toggleOptionVisibility+=+function+(stateVal)+{
++++var+isBool+=+typeof+stateVal+===+"boolean";
++++return+this.each(function+()+{
++++++++var+$this+=+$(this);
++++++++if+(navigator.userAgent.indexOf('MSIE')+>+-1+%7C%7C+navigator.userAgent.indexOf('Trident')+>+-1)+{
++++++++++++if+(isBool)+{
++++++++++++++++if+(stateVal)+$this.filter("span+>+option").unwrap();
++++++++++++++++else+$this.filter(":not(span+>+option)").wrap("").parent().hide();
++++++++++++}
++++++++++++else+{
++++++++++++++++$this.filter("span+>+option").toggleOptionVisibility(true);
++++++++++++++++$this.filter(":not(span+>+option)").toggleOptionVisibility(false);
++++++++++++}+++
++++++++}
++++++++else+{++++++++++++++
++++++++++++if+(isBool)+{
++++++++++++++++$this.show();
++++++++++++}
++++++++++++else+{
++++++++++++++++$this.hide();
++++++++++++}
++++++++}
++++});
};|code-block|syntax|javascript|1149162|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|$]]

using the solution provided by AuthorProxy, it works fine for IE but when I attempt to do a .val() on the dropdown in firefox I get some funky values that don't make any sense. I have modified their option to include browser specific functionality, hide/show works for firefox.

<pre><code>$.fn.toggleOptionVisibility = function (stateVal) {
 var isBool = typeof stateVal === "boolean";
 return this.each(function () {
 var $this = $(this);
 if (navigator.userAgent.indexOf('MSIE') &gt; -1 || navigator.userAgent.indexOf('Trident') &gt; -1) {
 if (isBool) {
 if (stateVal) $this.filter("span &gt; option").unwrap();
 else $this.filter(":not(span &gt; option)").wrap("&lt;span&gt;").parent().hide();
 }
 else {
 $this.filter("span &gt; option").toggleOptionVisibility(true);
 $this.filter(":not(span &gt; option)").toggleOptionVisibility(false);
 } 
 }
 else { 
 if (isBool) {
 $this.show();
 }
 else {
 $this.hide();
 }
 }
 });
};
</code></pre>

blocks|key|1149283|text|您可以通过var+$opt=$('select>option').clone()和$('select+option[value="'%2Bval%2B'"').remove()的组合使用。还有另一个例子:试试这个。https://jsfiddle.net/sherali/jkw8fxzf/12/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1149284|var+$secondOption=+$('#second-choice>option').clone();

$("#first-choice").change(function()+{
++++var+userSelected+=+$(this).val();

++++$('#second-choice').html($secondOption);
++++$('#second-choice+option[value="'%2BuserSelected%2B'"').remove()
});|code-block|syntax|javascript|1149285|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/sherali/jkw8fxzf/12/^0|5|Z|15|17|2V|15|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

You can use through combinations of <code>var $opt=$('select&gt;option').clone()</code> and <code>$('select option[value="'+val+'"').remove()</code>. 
There is another example: try this. <a href="https://jsfiddle.net/sherali/jkw8fxzf/12/" rel="nofollow">https://jsfiddle.net/sherali/jkw8fxzf/12/</a>

<pre><code>var $secondOption= $('#second-choice&gt;option').clone();

$("#first-choice").change(function() {
 var userSelected = $(this).val();

 $('#second-choice').html($secondOption);
 $('#second-choice option[value="'+userSelected+'"').remove()
});
</code></pre>

blocks|key|1364125|text|您需要删除它，然后为Internet+Explorer重新添加它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1364126|要删除，请执行以下操作：|1364127|$("#custcol7+option[value="+%2B+sizeValue+%2B+"]").remove();|code-block|syntax|javascript|1364128|要添加：|1364129|$("#custcol7").append(+"<option+value='sizeValue'>sizeValue</option>"+);|1364130|请注意，您还需要在选项文本中包含sizeValue，才能真正看到一些内容。|1364131|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|$]]

You will need to remove it and then add it again for Internet Explorer. 

To remove:

<pre><code>$("#custcol7 option[value=" + sizeValue + "]").remove();
</code></pre>

To add:

<pre><code>$("#custcol7").append( "&lt;option value='sizeValue'&gt;sizeValue&lt;/option&gt;" );
</code></pre>

Note that you need to have sizeValue also in the option text, to actually see something.

blocks|key|1149189|text|还可以替换select中的html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149190|Html：|1149191|<input+id="Button1"+type="button"+value="hide+option"+/>

<select+id="foo">
<option+>stuff</option>
<option+>stuff2</option>
</select>|code-block|syntax|javascript|1149192|Jquery：|1149193|++++$("#Button1").change(function+()+{
+++++++$('#foo').html('<option+>stuff</option>');
++++});|1149194|这并不完全是你想要的，但也许会有所帮助。对于较小的dropdowns，这绝对是更容易的。|1149195|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|$]]

You can also replace the html within the select.

Html:

<pre><code>&lt;input id="Button1" type="button" value="hide option" /&gt;

&lt;select id="foo"&gt;
&lt;option &gt;stuff&lt;/option&gt;
&lt;option &gt;stuff2&lt;/option&gt;
&lt;/select&gt;
</code></pre>

Jquery:

<pre><code> $("#Button1").change(function () {
 $('#foo').html('&lt;option &gt;stuff&lt;/option&gt;');
 });
</code></pre>

Not exactly what you want, but perhaps it helps. For smaller dropdowns, it is definitely easier.

blocks|key|1149331|text|在IE+11(Edge)中，以下代码工作正常。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149332|+$("#id+option[value='1']").remove();|code-block|syntax|javascript|1149333|回放广告，|1149334|$('<option>').val('1').text('myText').appendTo('#id');|1149335|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 IE 11(Edge), the following code is working.

<pre><code> $("#id option[value='1']").remove();
</code></pre>

and to ad back,

<pre><code>$('&lt;option&gt;').val('1').text('myText').appendTo('#id');
</code></pre>

blocks|key|1364372|text|++++<html>
++++<head><script>+
++++$(document).ready(function(){
++++$("#l1").change(function(){
++++++++++++var+selectedId=$("#dl1+option[value='"%2B$(this).val()%2B"']").attr("id");
++++++++++++$("#dl2+option[data-id+='"%2BselectedId%2B"']").removeAttr('disabled');
++++++++++++$("#dl2+option[data-id+!='"%2BselectedId%2B"']").attr('disabled','disabled');
++++++++++++$("#l2").val("");
++++});
++++});
++++</script></head>
++++<body>
++++<label+for="l1">choose+country</label>
++++<input+list="dl1"+name="l1"+id="l1"+type='select'>
++++++++<datalist+id="dl1"+name="dl1">
++++++++++++<option+value="India"+id=1>
++++++++++++<option+value="US"+id=2>
++++++++++++<option+value="Germany"+id=3>
++++++++</datalist>
++++ 
++++<label+for="l2">choose+City</label>
++++<input+list="dl2"+name="l2"+id="l2"+type='select'>
++++++++<datalist+id="dl2">
++++++++++++<option+value="New+Delhi"+id="11"+data-id="1">
++++++++++++<option+value="Washington+DC"+id="12"+data-id="2">
++++++++++++<option+value="Berlin"+id="13"+data-id="3">
++++++++++++<option+value="Mumbai"id="14"+data-id="1">
++++++++++++<option+value="NewYork"+id="15"+data-id="2">
++++++++++++<option+value="Munich"+id="16"+data-id="3">
++++++++</datalist>
++++</body>
++++</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1364373|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> &lt;html&gt;
 &lt;head&gt;&lt;script&gt; 
 $(document).ready(function(){
 $(&quot;#l1&quot;).change(function(){
 var selectedId=$(&quot;#dl1 option[value='&quot;+$(this).val()+&quot;']&quot;).attr(&quot;id&quot;);
 $(&quot;#dl2 option[data-id ='&quot;+selectedId+&quot;']&quot;).removeAttr('disabled');
 $(&quot;#dl2 option[data-id !='&quot;+selectedId+&quot;']&quot;).attr('disabled','disabled');
 $(&quot;#l2&quot;).val(&quot;&quot;);
 });
 });
 &lt;/script&gt;&lt;/head&gt;
 &lt;body&gt;
 &lt;label for=&quot;l1&quot;&gt;choose country&lt;/label&gt;
 &lt;input list=&quot;dl1&quot; name=&quot;l1&quot; id=&quot;l1&quot; type='select'&gt;
 &lt;datalist id=&quot;dl1&quot; name=&quot;dl1&quot;&gt;
 &lt;option value=&quot;India&quot; id=1&gt;
 &lt;option value=&quot;US&quot; id=2&gt;
 &lt;option value=&quot;Germany&quot; id=3&gt;
 &lt;/datalist&gt;
 &lt;br&gt;
 &lt;label for=&quot;l2&quot;&gt;choose City&lt;/label&gt;
 &lt;input list=&quot;dl2&quot; name=&quot;l2&quot; id=&quot;l2&quot; type='select'&gt;
 &lt;datalist id=&quot;dl2&quot;&gt;
 &lt;option value=&quot;New Delhi&quot; id=&quot;11&quot; data-id=&quot;1&quot;&gt;
 &lt;option value=&quot;Washington DC&quot; id=&quot;12&quot; data-id=&quot;2&quot;&gt;
 &lt;option value=&quot;Berlin&quot; id=&quot;13&quot; data-id=&quot;3&quot;&gt;
 &lt;option value=&quot;Mumbai&quot;id=&quot;14&quot; data-id=&quot;1&quot;&gt;
 &lt;option value=&quot;NewYork&quot; id=&quot;15&quot; data-id=&quot;2&quot;&gt;
 &lt;option value=&quot;Munich&quot; id=&quot;16&quot; data-id=&quot;3&quot;&gt;
 &lt;/datalist&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

blocks|key|1149081|text|您可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1149082|$("#custcol7+option[value="+%2B+sizeValue+%2B+"]").css({display:'none'});|code-block|syntax|javascript|1149083|它可以在除Safari和Opera之外的所有浏览器上正常工作。我正在寻找另一个最佳解决方案:)|1149084|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|$]]

You can use this:

<pre><code>$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});
</code></pre>

It works fine on all browsers except Safari and Opera. I'm searching for another best solution :)

Currently I am using jQuery to hide/show select options using following code.

<pre><code>$("#custcol7 option[value=" + sizeValue + "]").hide();
</code></pre>

This works fine in Firefox, but doesnt do any good in other browsers. How to I hide options from select in Chrome, Opera and IE?

Hide select option in IE using jQuery

jQuery

目前，我正在使用jQuery通过以下代码隐藏/显示选择选项。$("#custcol7 option[value=" + sizeValue + "]").hide();这在Firefox中工作得很好，但在其他浏览器中就没什么用了。如何在Chrome、Opera和IE中隐藏选项？

问使用jQuery在IE中隐藏选择选项
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在IE中隐藏选择选项EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在IE中隐藏选择选项
EN