Question

I have a select with some values in it. each value loads a different webpage.

I want the default value that always shows to be “Select page”.

How can I highlight the option for the current page when the user clicks on the dropdown?

By highlight i mean either have it selected or change its background colour or something.

HTML:

<select id="siteId" name="siteId" onchange=".....">
    <option value="">Select a page</option>
    <option row="1" value="68067">MAIN SITE</option>
    <option row="2" value="88616">A</option>
    <option row="3" value="88617">B</option>
</select>

EDIT: this select is created dynamically. I can only edit it with java-script after the page renders

Answer 1

If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit

first with :eq()

$('select option:eq(2)').css({"background":"green", "color":"white"});

and attribute selector like this one:

$('select option[row="1"]').css({"background":"red", "color":"yellow"});