Options with display:none not hidden in IE

Question

I have multiple options in a select. I have sorted the options and disabled and hidden the duplicate options with jquery. The code works well in chrome and firefox but in IE and safari, the options with display:none are still showing up.

Here is the jsfiddle of the code:

<select>
  <option value="5797">34</option>
  <option value="5809">37</option>
  ... 
  <option value="5653">71</option>
  <option disabled="" selected="selected" value="53">Eye</option>
  <option disabled="disabled" style="display: none;" value="5441">52</option>
  <option disabled="disabled" style="display: none;" value="5443">52</option>
  ...
  <option disabled="disabled" style="display: none;" value="5431">51</option>
</select>

http://jsfiddle.net/7vUdb/

Which versions of IE are you having trouble with. I know for a fact that IE8 and earlier have *extremely* limited ability for styling select boxes. — Spudley, Dec 04 '13 at 11:32

score 36 · Answer 1 · answered Dec 04 '13 at 11:03

36

IE doesn't support style="display:none;" on <option> tags.

Your only option is to remove them - either as part of the creation of the HTML, or via client-side script.

answered Dec 04 '13 at 11:03

freefaller

19,368
7
57
87

score 21 · Answer 2 · answered Mar 06 '15 at 11:40

21

If somebody still faces this issue, here is my solution, it may be helpfull:

$('select.some-list option[id=someId]').attr('disabled', 'disabled').hide();

This hides the option in all browsers and disables if can't hide :). To bring back the option do not forget to enable it:

$('select.some-list option[id=someId]').removeAttr('disabled').show();

answered Mar 06 '15 at 11:40

Gev

429
6
13

3

@Gev, Show a non-jquery solution. – Pacerier Jun 03 '15 at 05:03
This works in ie 9 as well. Thanks so much for the solution! – Coty Embry Jul 15 '16 at 22:00
Does not seem to be working in Edge. [Has been reported](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5457477/) on MS Dev forum, says to be fixed, but I still have the problem. – rkeet Sep 07 '16 at 09:13
This solution cannot hide the option. I really want to hide it completely. – NoName Jun 27 '18 at 14:36
1

You should use `.prop()` here not add/remove an attribute – Mark Schultheiss Apr 05 '19 at 15:52

score 4 · Answer 3 · edited Jan 07 '19 at 14:01

4

You can use detach() and remove() to do this.

edited Jan 07 '19 at 14:01

SharpC

6,974
4
45
40

answered Aug 17 '16 at 02:09

Zhangjiang Huang

41
1

score 3 · Answer 4 · answered Oct 07 '17 at 21:17

Expanding on Zhangjiang Huang's answer: Pretty much you cache all the options, detach them from the drop-down, then you reattach the ones you want.

JQuery:

(function(){
   // Cache List
   var options = $("select option");

   // Clear list
   options.detach();
   // Rebuild list
   options.not(".disabled").appendTo("select");
   // Set Default
   $("select").val("");
})();

HTML:

<select>
   <option value="">---Select One---</option>
   <option value="5797">34</option>
   <option value="5809">37</option>
    ... 
   <option value="5653">71</option>
   <option class="disabled" value="53">Eye</option>
   <option class="disabled"value="5441">52</option>
   <option class="disabled" value="5443">52</option>
   ...
   <option class="disabled" value="5431">51</option>
</select>

jsfiddle

Divya Bhaloidiya · Answer 5 · 2013-12-04T12:14:06.143

1

Use following Js to hide option tag

<select id="selectlist">
      <option value="5797">34</option>
      <option value="5809">37</option>
       <option value="5653">71</option>
      <option  value="53">Eye</option>
      <option  value="5441">52</option>
      <option  value="5443">52</option>
      <option value="5431">51</option>
    </select>


$('#selectlist option[value=53]').hide();
$('#selectlist option[value=52]').hide();
$('#selectlist option[value=5443]').hide();

Ref : jsfiddle.net/p8Gmm/7

Or

Ref :

http://jsfiddle.net/chiragvidani/vhKdw/

edited Dec 04 '13 at 12:14

answered Dec 04 '13 at 11:24

Divya Bhaloidiya

5,018
2
25
45

I dont need to remove any option. Your JSfiddle removes the option! – MJQ Dec 04 '13 at 11:39
What does your second JSfiddle do with display!!! In that just an option is disabled! – MJQ Dec 04 '13 at 12:09
You have to use like $('#selectlist option[value=53]').hide(); – Divya Bhaloidiya Dec 04 '13 at 12:10
@MJQ, you appear to be waiting for a solution that means that ` – freefaller Dec 04 '13 at 12:10
http://jsfiddle.net/p8Gmm/7/ see my this fiddle with inspecting element of the select – Divya Bhaloidiya Dec 04 '13 at 12:11
@ freefaller : he can use js for this, like jsfiddle.net/p8Gmm/7, he can get his solution like this. – Divya Bhaloidiya Dec 04 '13 at 12:16
@ freefaller: I am not waiting. I am trying my bit to resolve it! – MJQ Dec 04 '13 at 13:29
@freefaller, Is it listed anywhere on modern.ie? Can't seem to find it http://dev.modern.ie/platform/status/?filter=f3f0000bf&search=option – Pacerier Jun 03 '15 at 05:05

Stephen · Answer 6 · 2016-09-20T12:51:48.457

my 2 cents worth on an "old question", yet still a relevant issue.

Server side:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   { //load subDropDownList all possible values [with an attribute for filtering] }
}

Client-side:

var optionList = null;
$(function(){
  if (!optionList)
  {
     optionList = new Array();
     $("[id$='subDropDownList'] option").each(function () {
         optionList.push({value: $(this).val(), text: $(this).text(), filterID: $(this).data("filterid") }); 
      });
  } 

  $("[id$='mainDropDownList']").on("change", function (e) {
     var filterID = $(this).val();
     $("[id$='subDropDownList']").html("");

     $.each(optionList, function () {
        if (this.filterID == filterID)
          $("[id$='subDropDownList']").append($("<option></option>").val(this.value).html(this.text).data("filterid", this.filterID));
        });


  });

})

The idea here is on client side I load all values into an array, then on change event of the main select I add only the required options. Hope someone finds this helpful.

score 1 · Answer 7 · answered Jan 07 '19 at 14:17

The solution by @Gev is good, but the options still appear (even though disabled), so the behaviour is inconsistent across browsers.

You could amend the option tag to something else which stops it appearing, but then you lose any attributes or HTML5 data tags.

The solution I came up with was to wrap any options you want disabled in a different tag (in this case a made up one, which does the job and makes it clear what's happening).

Starting with example of options also with optional data tags:

<select id="myselections">
  <option data-something="a" value="5797">34</option>
  <option data-something="f" value="5809">37</option>
  <option data-something="j" value="5653">71</option>
</select>

To hide the options you don't want:

$("#myselections > option").each(function () {
    if(some check) {
        $(this).wrap("<optionhidden></optionhidden>");
    }
});

To undo the above on the whole list before hiding different options:

$("#myselections > optionhidden").each(function () {
    $(this).replaceWith($(this).html());
});

mobdd · Answer 8 · 2019-01-28T12:16:16.993

1

Same problem here in IE 10, 11, Edge.. Options will not disapear like in Firefox, Chrome, ..

(jQuery-Code)

Works not:

$('option').hide();
$('option').attr('style', 'display: none !important');
$('option').attr('disabled', 'disabled');

But that works!

$('option').unwrap('div').wrap('<div style="display: none;" />');

edited Jan 28 '19 at 12:16

answered Jan 28 '19 at 12:10

mobdd

39
5

score 0 · Answer 9 · answered Oct 17 '16 at 06:30

Try this following code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var detachedSecondElem,detachedFirstElem="";
var firstDetachedAt, secondDetachedAt;
function changedFirst(){
 var val1=$('#slct').val();
 if(detachedSecondElem!="")
  $( detachedSecondElem ).insertAfter( $("#slct1 option").eq((secondDetachedAt-1)) );

 if(val1!=""){
   secondDetachedAt = $('#slct1 option[value="'+val1+'"]').prevAll().length;
   detachedSecondElem = $('#slct1 option[value="'+val1+'"]').detach();
 }
}
function changedSecond(){
 var val2=$('#slct1').val();
 if(detachedFirstElem!="")
  $( detachedFirstElem).insertAfter( $("#slct option").eq((firstDetachedAt-1)) );

 if(val2!=""){
   firstDetachedAt= $('#slct option[value="'+val2+'"]').prevAll().length;
   detachedFirstElem= $('#slct option[value="'+val2+'"]').detach();
 }
}
</script>
</head>
<body>
<select id="slct" onchange="changedFirst();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<select id="slct1" onchange="changedSecond();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<input type="button" value="click me" onclick="disableOption();"/>
<input type="button" value="click me" onclick="attachElem();"/>
</body>
</html>

score 0 · Answer 10 · answered Dec 05 '16 at 10:58

sort by disabled options. 

$("#addselect option").each(function (i, val) {
                if ($(this)[i].disabled) {
                    moveDown("selectId");
                }
                else {
                    moveUp("selectId");
                }
 }

   function moveUp(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = 1; i < selectOptions.length; i++) {
                var opt = selectOptions[i];
                if (!opt.disabled) {
                    selectList.removeChild(opt);
                    selectList.insertBefore(opt, selectOptions[i - 1]);
                }
            }
        }

        function moveDown(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = selectOptions.length - 2; i >= 0; i--) {
                var opt = selectOptions[i];
                if (opt.disabled) {
                    var nextOpt = selectOptions[i + 1];
                    opt = selectList.removeChild(opt);
                    nextOpt = selectList.replaceChild(opt, nextOpt);
                    selectList.insertBefore(nextOpt, opt);
                }
            }
        }

Options with display:none not hidden in IE

10 Answers10

Linked

Related