How can I get the selected item's text in JavaScript?

Question

How can I get the selected item's value and text in JavaScript?

This is my combobox:

<select  size="1" id="fTerminalType" name="fTerminalType">
    <option value="AP">Airport</option>
    <option value="PT">Port</option>
    <option value="BS">Bus</option>
    <option value="TR">Train</option>
</select>

My JavaScript is like this:

var TerminalType = document.getElementById("fTerminalType").value;

Here I can get the value of the combobox. But how can I get the text of the selected value? For example if value was "BS", I need the text "Bus".

Answer 1

function getSelectText(selId) {      
   var sel = document.getElementById(selId);
   var i = sel.selectedIndex;
   var selected_text = sel.options[i].text;
   return selected_text;
}

alert(getSelectText("fTerminalType"));

The above explained:

• get a reference to the select using the passed ID string.
• get the selectedIndex and store it in a variable.
• use the selectedIndex to get the text property of the selected option.

See http://www.w3schools.com/htmldom/dom%5Fobj%5Fselect.asp

Answer 2

var t = document.getElementById("fTerminalType");
var selectedText = t.options[t.selectedIndex].text;

Answer 3

var TerminalType = document.getElementById("fTerminalType").innerHTML;

give that a try!

Answer 4

Here is what you want:

var terminal = document.getElementById("fTerminalType");
var selectedText = terminal.options[terminal.selectedIndex].text;

That should do the trick.