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:

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:

Code:

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:

Code:

<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