Lease Hide Selected Option For Free

Changing select2 code was also out of the question. My solution was to store a copy of the options for each select in memory as an array. When I wanted to "hide" an option, i would use jQuery remove(). When I wanted to "unhide", I would re-add it to that select's options.

The following jQuery will work in Internet Explorer, Firefox and Goolge Chrome (as well as other browsers). it will hide and disable the option: $('select optionvalue=saab'). attr('disabled', 'disabled').

Simply append disabled="disabled" in the tag. To do it in jQuery, make sure you've got the latest version loaded, then use the . attr() javascript to append the attribute disabled="disabled" as needed like so: .

You have to implement two methods for hiding. display: none works for FF, but not Chrome or IE. So the second method is wrapping the <option> in a <span> with display: none . FF won't do it (technically invalid HTML, per the spec) but Chrome and IE will and it will hide the option.

4 AnswersSelect the <select /> element. (No pun intended)Find <option /> elements within the previously selected element. I used find() because if there are option groups then children() won't work.Filter down to only the first <option /> element.Remove that element from the DOM.Nov 7, 2014

Step 2 - disable first option by code$( "#category option:first-child" ) - select first child (option in this case) of select menu with id of category . first-child-selector docs.attr("disabled","disabled"); - set disable attribute by jquery. jQuery attr() Method docs // disable attribute docs.

You could save the <option> elements you want to hide in hidden select element: $('#visible').