Change 1 selected item from dropdownbox <select...>

Bob8

07-15-2011, 08:37 PM

Hello all,

I am having a problem, and since I am quite new in the Javascript code I hope somebody can help me here.
This is my current code:

<select class="Form" name="opties">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="SLX" selected>Selecteer optie</option>
</select>

Now my intention is the following: When the option with value SLX gets selected it needs to get a special css style. It is not a problem to give the option this style in the list itself, but once selected it always changes to the original style (standard font and color) in Chrome and Mozilla.

Now I searched on the net and sometimes I find things like this:

function displayOption(divName)
{
document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
}

<select class="Form" name="opties" onChange="displayOption('div1');">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="SLX" selected>Selecteer optie</option>
</select>

But I suppose this always changes the style of the selected item? It only needs to change when the option SLX is chosen...

Anyone knows how to solve this problem?

Old Pedant

07-15-2011, 11:34 PM

innerText isn't supported in all browsers, in any case.

And there are only two style changes in <option>s that work in all browsers, so far as I know: color and backgroundColor.

But how about something like this:

<html>
<body>
<form>
<select style="color: green;" onchange="this.style.color=this.options[this.selectedIndex].style.color;">
<option value="AAA" style="color: red;">AAA</option>
<option value="BBB" style="color: blue;">BBB</option>
<option value="SLX" selected style="color: green;">Selecteer optie</option>
</select>
</form>
</body>
</html>

Kind of a hack, but it works in MSIE and FF, at least.

Bob8

07-16-2011, 09:51 PM

sorry for the late reply but, thanks, hero :D