34

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/

Improve this question
4
  • 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. Commented Dec 4, 2013 at 11:32
  • I am testing it on IE 10. Commented Dec 4, 2013 at 11:36
  • 3
    IE 11 still has the same behaviour. Commented Jun 28, 2017 at 12:20
  • Confirmed this is still an issue in Edge as well Commented Aug 15, 2017 at 18:15

10 Answers 10

Reset to default
37

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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();
Improve this answer

5 Comments

@Gev, Show a non-jquery solution.
This works in ie 9 as well. Thanks so much for the solution!
Does not seem to be working in Edge. Has been reported on MS Dev forum, says to be fixed, but I still have the problem.
This solution cannot hide the option. I really want to hide it completely.
You should use .prop() here not add/remove an attribute
4

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

Improve this answer

Comments

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

Improve this answer

Comments

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/

Improve this answer

8 Comments

I dont need to remove any option. Your JSfiddle removes the option!
What does your second JSfiddle do with display!!! In that just an option is disabled!
You have to use like $('#selectlist option[value=53]').hide();
@MJQ, you appear to be waiting for a solution that means that <option style="display:none"> will work in IE. Stop waiting, it doesn't work
jsfiddle.net/p8Gmm/7 see my this fiddle with inspecting element of the select
|
1

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.

Improve this answer

Comments

1

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()); });
Improve this answer

Comments

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;" />');
Improve this answer

Comments

0

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>
Improve this answer

Comments

0 
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); } } }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.