How to Hide and Show SELECT Options with JQuery in IE

Question

I'm trying to hide some options from a drop down. JQuery's .hide() and .show() work great in Firefox and Chrome, but no luck in IE.

Any good ideas?

Can we see some code maby? – Farhan Ahmad Jul 19 '13 at 00:49 — Farhan Ahmad, Jul 19 '13 at 00:49

Tony Brasunas · Accepted Answer · 2020-06-01T19:13:02.160

12

Hide and Show the Options based on Browser detection

Of many possible approaches, this method requires browser sniffing, which can be unstable, but on the other hand with this approach we don't have to swap in and out multiple copies of the same select list.

//To hide elements
$("select option").each(function(index, val){
    if ($(this).is('option') && (!$(this).parent().is('span')))
        $(this).wrap((navigator.appName == 'Microsoft Internet Explorer') ? '<span>' : null).hide();
});

//To show elements
$("select option").each(function(index, val) {
    if(navigator.appName == 'Microsoft Internet Explorer') {
        if (this.nodeName.toUpperCase() === 'OPTION') {
            var span = $(this).parent();
            var opt = this;
            if($(this).parent().is('span')) {
                $(opt).show();
                $(span).replaceWith(opt);
            }
        }
    } else {
        $(this).show(); //all other browsers use standard .show()
    }
});

Credit for this lies squarely with Dima Svirid here: http://ajax911.com/hide-options-selecbox-jquery/

edited Jun 01 '20 at 19:13

answered Jul 19 '13 at 00:52

Tony Brasunas

4,012
3
39
51

This works, yet ultimately a better and cleaner cross-browser solution is to create, add, and remove select items in real time with script. – Tony Brasunas Aug 13 '13 at 23:01
1

Excellent @tony :) Works perfectly! – Karthi Skb Sep 16 '15 at 14:20
This is incredibly hacky, though sadly the only solution I could find for a project that would have required a significant recode to implement any other method. Cheers. – AJReading May 16 '16 at 17:13
Yes it is hacky indeed. – Tony Brasunas May 16 '16 at 22:00
Saved a lot of time for me from recoding when i encountered this stupid IE bug. – Abdul Hameed Apr 14 '17 at 10:39
Hi, i tryed this with Internet Explorer 11... but navigator.appName is "Netscape" for I.E. 11... – Didier68 Jul 03 '17 at 10:09
For testing IE 11, read at: https://stackoverflow.com/questions/17447373/how-can-i-target-only-internet-explorer-11-with-javascript/17447718#17447718 – Didier68 Jul 03 '17 at 10:21

score 3 · Answer 2 · answered Jan 06 '16 at 10:10

3

Just to mention that IE11 navigator.appName returns 'Netscape' :) So taking it into consideration:

$("select option[value='your_option_value']").wrap((navigator.appName == 'Microsoft Internet Explorer' || navigator.appName == 'Netscape') ? '<span>' : null).hide();

answered Jan 06 '16 at 10:10

Vlado

3,517
2
26
24

1

This is a good point. However, other browsers can [choose to return 'Netscape' here too](http://stackoverflow.com/questions/14573881/why-does-javascript-navigator-appname-return-netscape-for-safari-firefox-and-ch), so your mileage may vary. – Tony Brasunas Apr 15 '17 at 19:07

score 0 · Answer 3 · answered May 26 '20 at 13:14

I found a rather simple solution, although the options will not be hidden but disabled on IE.

$('#delivery_time option[value="06:30"]').removeAttr('disabled').show();       // To Show/Enable
$('#delivery_time option[value="06:30"]').attr('disabled', 'disabled').hide(); // To Hide/Disable

Here is the source where I stumbled upon these 2 lines: IT Support Guides - Internet Explorer – How to hide select options using jQuery

How to Hide and Show SELECT Options with JQuery in IE

3 Answers3

Linked