javascript - hide() not working in IE - Stack Overflow

admin管理员组

文章数量:1421701

My code works perfect in firefox and gives error in IE. any ideas?

I have a dropdown with various options, I am trying to show/hide options in another dropdown based on the selected value.

function selectNames() {
var Name = $("#SelectName").attr("value");
 $("."+Name).each(function() {
   $(this).hide();            
 });
}

<select >
   <option class="Name1" value="SomeName1" </option>
   <option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
   <option value="Name1" </option>
   <option value="Name2" </option>
</select>

Any help is appreciated..

My code works perfect in firefox and gives error in IE. any ideas?

I have a dropdown with various options, I am trying to show/hide options in another dropdown based on the selected value.

function selectNames() {
var Name = $("#SelectName").attr("value");
 $("."+Name).each(function() {
   $(this).hide();            
 });
}

<select >
   <option class="Name1" value="SomeName1" </option>
   <option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
   <option value="Name1" </option>
   <option value="Name2" </option>
</select>

Any help is appreciated..

• javascript
• jquery
• internet-explorer
• jquery-ui

Share Improve this question Follow edited Apr 6, 2011 at 17:24 Andy E 345k8686 gold badges482482 silver badges451451 bronze badges asked Apr 6, 2011 at 17:18 waterlillywaterlilly 1111 silver badge22 bronze badges 6

• Any specifics on the error you could give us? – Argote Commented Apr 6, 2011 at 17:20
• You get error or unexpected output? – Shamim Hafiz - MSFT Commented Apr 6, 2011 at 17:21
• See also: Hide options in a select list using jQuery, which indicates that hiding options is not cross-browser safe. – justkt Commented Apr 6, 2011 at 17:22
• @justkt: ignore my previous ment - you were right :-) – Andy E Commented Apr 6, 2011 at 17:32
• 2 At a glance, your option tags are not well formed. Maybe that's the reason? – Sang Suantak Commented Apr 6, 2011 at 17:52

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 2

Make sure you close the start tag. Try to use this:

<select>
    <option class="Name1" value="SomeName1" />
    <option class="Name2" value="SomeName2" />
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
    <option value="Name1" />
    <option value="Name2" />
</select>

Seems to work for me in IE8.

It won't work in IE & Chrome

check out in IE or Chrome

The best alternative that you can do is to remove the option rather than hiding it.(you should keep a copy of the original options before removing it.)

var copy = $("."+Name).clone();
function selectNames() {
   $("#thefirstselect option").remove();
   copy.appendTo("#thefirstselect");
   var Name = $("#SelectName").val();

   $("."+Name).each(function() {
      $(this).remove();            
});
}

Your markup is not correct. You are each option open tag isn't properly closed.

Also, the specs do not specify CSS changes to individual option tags, though it does work on Firefox.

In simpler words, you cannot hide individual inputs - in which case, you'll have to remove them.

If this is a direct copy and paste then you need to close the select options to look like this:

<option value="Name1">Name1</option>
<option value="Name2">Name2</option>

I would suggest having two selects that you show and hide. Show and hide of options sounds risky.

Also, make sure you set the hidden select to attr('disabled','disabled')/disabled="disabled" and then when you unhide it undo that with removeAttr('disabled'). This is to prevent the hidden select from posting data to the server when you have multiple selects with the same name="...".

If you must use a single select, you may want to appendTo/remove the options, but that is up to you. If show/hide works in all browsers, go for it.

Sadly, you just can't.
IE don't support hide of individual options in a select, neither Chrome or Opera. This feature isn't cross browser.

What you can do is remove the option and add it again later...

本文标签： javascripthide() not working in IEStack Overflow