Hiding an element using jquery on click does not work on IE?

Question

I have my dropdown like this,

<div class="my_div">
    <select name="selection" id="select_id">
        <option value="0">A</option>
        <option value="5">B</option>
        <option value="6">C</option>
        <option value="7">D</option>
        <option value="8">D</option>
        <option value="9">F</option>
    </select>
</div>

my links look like this,

<a class="links" href="#">Disable A C D</a>
<a class="links" href="#">Disable B E F</a>

and my script looks like this,

$(document).ready(function(){
    $('.links a').click(function(){
        var txt = $(this).text();       

        if( txt == 'Disable A C D'){
            $('div.my_div #select_id').find("option[value='0']").hide();
            $('div.my_div #select_id').find("option[value='6']").hide();
            $('div.my_div #select_id').find("option[value='7']").hide();
        }
    });
});

This works on Firefox and Chrome but only disabling the option will work on IE, hiding it does not work. What do I miss? Cheers!

Try replacing `.attr("disabled","disabled")` with `.prop("disabled",false)`, just to see if doing it from a different direction makes a difference. Also, `div.my_div #select_id` should be `#select_id`, though that isn't related to your problem. — Kevin B, Oct 12 '12 at 18:21
@KevinB, there is no problem in disabling the options. It works on FF, Chrome and IE. My problem is hiding the options. — Tsukimoto Mitsumasa, Oct 12 '12 at 18:23
@KevinB: It doesn't *have* to be just the ID; but the fact it is written like that suggests the ID may be getting reused. Which IE will kick. — Orbling, Oct 12 '12 at 18:23
@CHiRiLo If you don't disable it, does the hide work? That would confirm that .attr and .prop have nothing to do with it. I agree that they shouldn't, but it's worth ruling it out. The simplest way to find a problem is to simplify the code until nothing but the problem is left. — Kevin B, Oct 12 '12 at 18:24
I would do an alert(txt); to see if the problem is there. If the text is passing correctly, then try alert(txt=='Disable A C D');. That will at least help you narrow down where the issue may be. — coopersita, Oct 12 '12 at 18:26
@KevinB, it does not hide still. I mean hiding it on FF and Chrome works but not on IE. — Tsukimoto Mitsumasa, Oct 12 '12 at 18:28
I tried it, [made a jsFiddle](http://jsfiddle.net/KEfjM/2/), and it doesn't seems to hide the options in chrome nor IE. But its fine in FF. — Kraz, Oct 12 '12 at 18:33

Gromer · Answer 1 · 2012-10-12T18:48:47.477

0

You selector for you link was wrong. Try this:

$('a.links')

This Fiddle works in IE (9 at least): http://jsfiddle.net/gromer/2qyT7/1/

Beware, there are a couple console.logs in that Fiddle, may make IE angry.

It doesn't hide the option in IE, but they are disabled.

Edit: I pieced together this workaround for IE based on your requirements and answers I found on SO.

New Fiddle: http://jsfiddle.net/2qyT7/19/

edited Oct 12 '12 at 18:48

answered Oct 12 '12 at 18:25

Gromer

9,861
4
34
55

Well, explain the problem better. You're disabling the option, then trying to hide it. So what do you want to happen? Have the option hidden from the select list, or still in the list but disabled? When you remove the `.hide()` you're calling on those 3 options, they end up disabled in FF/Chrome/IE. – Gromer Oct 12 '12 at 18:34
I am sorry if I was not accurate on explaining my problem, but my main concern is to hide the option. Having it disabled can be ignored. Is there a workaround for this, hiding the option? – Tsukimoto Mitsumasa Oct 12 '12 at 18:36
Yeah, they are disabled. Let me edit my code above and remove the disabling part just the hiding the option. – Tsukimoto Mitsumasa Oct 12 '12 at 18:37
Updated my answer with a new Fiddle. Check it out, see if it's what you're going for. – Gromer Oct 12 '12 at 18:49
What version of IE are you using? Are you saying my Fiddle isn't working, or code you copied from it isn't working? – Gromer Oct 12 '12 at 19:05

score 0 · Answer 2 · answered Oct 12 '12 at 18:35

Your code example doesn't work on any browser.

'.links a' should just be '.links' or 'a.links', and you don't need 'div.my_div #select_id' when '#select_id' would work fine.

To your question, it looks like IE doesn't like display: none on Option elements. You'll probably have to programatically remove and add options to the Select as needed.

score 0 · Answer 3 · answered Oct 12 '12 at 18:38

0

... Are you sure it works in chrome? http://jsfiddle.net/KEfjM/2/ This is a CSS/browser support problem, not a jQuery problem. The only solution is going to be to remove the options from the select.

$(document).ready(function(){
    $('.links a').click(function(){
        var txt = $(this).text();    
        if( txt == 'Disable A C D'){
           $('#select_id').find("option[value='0'],option[value='6'],option[value='7']").detach();
        }
    });
});

answered Oct 12 '12 at 18:38

Kevin B

94,570
16
163
180

If I am going to use `detach()`, is there a way where I can attach back the options? I used `hide()` for it to be easy to just shown the hidden option. I don't want the option to be removed permanently on the drop-down list. – Tsukimoto Mitsumasa Oct 12 '12 at 18:41
Yes, you would need to store the detached options in a variable that is in a parent scope and then re-attach them (append) to the select as needed. – Kevin B Oct 12 '12 at 18:42

score 0 · Answer 4 · edited May 23 '17 at 11:43

0

It only works in FF and it shouldn't. (see this jsFiddle)

This question was already asked too.

If you really want to remove the option from your select list, you should remove them entirely, not hide. In the case you might want them back, move them to some other array in memory instead.

edited May 23 '17 at 11:43

Community

1
1

answered Oct 12 '12 at 18:41

Kraz

6,910
6
42
70

Hiding an element using jquery on click does not work on IE?

4 Answers4