Hello everyone! Before me there was such a task:

1) Given:

<select id="selectId"> <option value="value1" selected="selected">value1</option> <option value="value1" style="display:none;">value2</option> <option value="value1" style="display:none;">value3</option> </select>

Find: js function, which would take one <option> in its meaning and change its style. You cannot assign a name or id to options.

2) style="display:none;" for the <option> does not plow in IE and Opera. I have not even the slightest idea why ...

I would appreciate any suggestions =)

    3 answers 3

    display: none of the option does not work anywhere else except ff. For chrome, you can make visibility: hidden, but the place will remain. You can use line-height, but the element will still be visible.

    If jQuery, then wrote @metazet

    If js is clean, then:

     var opts = document.getElementById('selectId').getElementsByTagName('option'); for (var i in opts) { if (opts[i].getAttribute('value') == 'value1') { opts[i].style.backgroundColor = '#f00'; } }
      1. jQuery selector: $ ("# selectId option [value = 'value1']"). css ("style", "some: some;"); or adding a class via $ ("selector"). addClass ("class_name");
      2. try! important, although here I xs to be honest ...

        2) Alternatively, you can write a js class that would compile a list of options, remove the option from the select and return the option back from the list.
        You can also style select with the jquery plugin. Then select will be replaced with another tag (ul, if I'm not mistaken), and it's easier to work with it.