Using onChange with a Select statement

[webphotogeek]

Can someone tell me the correct syntax for the Select statement that uses the onChange event? Here's what I have, which is obvioulsy not working:

<script type="text/javascript">
function mainOptions(optionsVar) {
if (OptionsVar == 'Medical') {
document.getElementById('medical').style.display="";
}
}
</script>

<form name="expenses">
<p><select id="selOptions" onChange="mainOptions(this);"></p>
<option>Please Select</option>></p>
<p><option>Photography</option> </p>
<p><option>Computers</option></p>
<p><option>Medical</option></p>
<p><option>Other</option></p>
</select>
</form>

[rangana]

First, it's erroneous since you don't have an element having the id of medical yet. Or you just missed showing it to us.

JS is case-sensitive. Capitalization matters.

Here are the changes, highlighted are added:

<script type="text/javascript">
function mainOptions(optionsVar) {
if (optionsVar.value == 'Medical') {
document.getElementById('medical').style.display="";
}
}
</script>

See if it helps.

[webphotogeek]

Thanks and I did leave out the id part:

<div id="medical">
Enter Medical Option:&nbsp;
<p><select name="medical_options"></p>
<p><option>co-pays</option> </p>
<p><option>Perscriptions</option></p>
<p><option>Travel</option></p>
<p><option>Other</option></p>
</select>
</div>

and the 'O' was a typo, but I did correct it and added '.value', but I am still getting no value. I tested it with alert(optionsVar.value).

Am I using 'this' properly in mainOptions(this)? Or am I supposed to use something like this - onChange="mainOptions(document.expenses.selOptions.options[document.expenses.selOptions.selectedIndex].value);"

Thanks for you help. I am confused, but once I get passed this part, I should understand it better.

- Steve

[rangana]

The way you position your divs is erroneous!.

Have it outside your combobox.