Hide select option in IE using jQuery

javascript jquery html-select
ITRushn picture ITRushn · Jan 9, 2010 · Viewed 69.1k times · Source

Currently I am using jQuery to hide/show select options using following code.

$("#custcol7 option[value=" + sizeValue + "]").hide();

This works fine in Firefox, but doesnt do any good in other browsers. How to I hide options from select in Chrome, Opera and IE?

Answer

meder omuraliev picture meder omuraliev · Mar 24, 2011

I just came across this and instead of cloning the entire select over and over I just replaced the options that need to be hidden with span elements and hiding the spans ( though the browser didnt visually show them anyway, I think ) - you may need to change your code ( if complex ) to iterate through the spans for complex logic.

The spans store a reference to the option and replace themselves with it when they need to be shown.

This code can obviously be refactored and prettified.

http://fiddle.jshell.net/FAkEK/12/show/

EDIT #2 ( USE THIS INSTEAD ): It occurred to me that instead of doing all this clone/reference/replace crap, just wrap the option with a span, hide the span, and on show just replace the span with the option again..

http://fiddle.jshell.net/FAkEK/25/show/

Related questions

Change the selected value of a drop-down list with jQuery

I have a drop-down list with known values. What I'm trying to do is set the drop down list to a particular value that I know exists using jQuery. Using regular JavaScript, I would do something like: ddl = document.getElementById("…

Read More
Adding options to a <select> using jQuery?

What's the easiest way to add an option to a dropdown using jQuery? Will this work? $("#mySelect").append('<option value=1>My option</option>');

Read More
How do you remove all the options of a select box and then add one option and select it with jQuery?

Using core jQuery, how do you remove all the options of a select box, then add one option and select it? My select box is the following. <Select id="mySelect" size="9"> </Select> EDIT: The following code …

Read More