JavaScript getting name of SELECT option

Question

Take following:

<select id="test">
 <option value="1">Test One</option>
 <option value="2">Test Two</option>
</select>

How do I get to "Test One" and "Test Two" using javascript

document.getElementsById('test').selectedValue returns 1 or 2, what propery return actual name of selected option ?

Thanks for help!

Answer 1

The options property contains all the <options> - from there you can look at .text

document.getElementById('test').options[0].text == 'Text One'

Answer 2

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

Answer 3

If you use jQuery then you can write the following code:

$("#selectId option:selected").html();