Options with display:none not hidden in IE

user_1425711 0
Viewed 53813

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/

internet-explorer select html
10 Answers

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.

user_9303930

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

user_65136980

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/

user_25470640

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());
});
user_17416900

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;" />');
user_37947000

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>
user_16623620
Related