javascript - How can I highlight an option in a dropdown menu? - Stack Overflow

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 5, 2012 at 16:10 124697 asked Dec 5, 2012 at 16:05 124697124697 21.9k6969 gold badges197197 silver badges319319 bronze badges 1

• Use the selected attribute?? – epascarello Commented Dec 5, 2012 at 16:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.

You can add a class like this

$('current page selector').addClass('current');

You could also just manually set it with the css function

$('current page selector').css('background-color', 'red');

You don't really have enough information for me to help you determine how to find the current page. I remend having some way to tell from the value of the option that you can pare to the current window.location.

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./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"});

There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:

<style type='text/css'>
    .highlighted {
        background-color: yellow;
    }
</style>

<select name='whatever'>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3' style='background-color: green;'>three</option>
    <option value='4' class='highlighted'>four</option>
</select>

Again, both methods work on windows, neither on OS X.

If you want a solution that works everywhere, you need to build your own dropdown control.

Set selected="selected" for the option you want to be the default.

<option row="3" value="88617" selected="selected">B</option>