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

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

Answer 2

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.

Answer 3

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

Answer 4

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