assigning and displaying selected select option

[rpjd]

My select menu is in a DIV

Code: Select all

Class="County"

. The select tag has

Code: Select all

onchange="ShowSuburb();"

For test purposes I want to assign the option selected to a variable, then display the variable. I've tried using

Code: Select all

function ShowSuburbs()
{
var county = document.getElementById("County").value;
alert(county);
}


but all I get is an empty alert. Can anyone help with this?

[harrierdh]

Code: Select all

<script>
function ShowSuburbs()
{
    var county = document.getElementById("County");
   alert(county.selectedIndex);
   var countyValue = county.options[county.selectedIndex].value; 
   alert(countyValue);
}
</script>
<select name="County" id="County" onChange="ShowSuburbs()">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>

[rangana]

@harrierdh: This code:

Code: Select all

var countyValue = county.options[county.selectedIndex].value; 


can be written in a less-verbose manner as:

Code: Select all

var countyValue = county.value;