Getting displayed value of select tag

Question

<select id="kamal">
<option value"ACTIVE">a<option>
<option value"DISABLED">b<option>
<option value"DELETED">c<option>
</select>

I want to get the value displayed on the page..not the value shown in the option tag

I am interested in "aktiv" not "ACTIVE"

when i write document.getElementById("kamal").value; then the value that is select comes in the variable. But I want the displayed value.

Please help me how can I take this value.

NOTE: By using all the options given below, it will give me the value of the selected option, I want the label of the selected option. I mean the displayed value on html page.

Answer 1

The solution you are looking for is:

To get the value:

var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].value;

To get the text:

var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].text;

EDIT:

working example at:

http://jsfiddle.net/n85tW/6/

Answer 2

Try:

var sel = document.getElementById("kamal")
alert(sel.options[sel.selectedIndex].value); 

Working example here

Note: your <option> tags should be closed with </option>

Answer 3

var element = document.getElementById("kamal"); var selectedValue = element.options[element.selectedIndex]. innerHTML;

THis was the solution of my question.