Question

I am trying to hide some <options> tags with jquery but it doesn’t seem to work.

• I want to hide all options that have the rel attribute.

• Show only options for rel='3'

This code works on FF and Chrome. Doesn’t work IE, Safari and Opera.

Here is my jsfiddle:

http://jsfiddle.net/RnfqW/4/

Here is the markup and script:

<select name="myselect" id="myselect" >
    <option value=''></option>
    <option rel='1' value='1A'>1A</option>
    <option rel='1' value='1B'>1B</option>
    <option rel='2' value='2A'>2A</option>
    <option rel='2' value='2B'>2B</option>
    <option rel='2' value='2C'>2C</option>
    <option rel='3' value='3A'>3A</option>
    <option rel='3' value='3B'>3B</option>
    <option rel='3' value='3C'>3C</option>
    <option rel='3' value='3D'>3D</option>
</select>

Script:

$("#myselect [rel]").hide(); // hide all options
$("#myselect [rel=3]").show(); // hide whow only rel=3 options

Answer 1

You can’t hide or show options. What you must do is clone your select and delete option tags you don’t want.

EDIT : something like that http://jsfiddle.net/RnfqW/5/