How do you get the currently selected <option> in a <select> via JavaScript?

JavascriptHtmlHtml Select

Javascript Problem Overview

How do you get the currently selected <option> of a <select> element via JavaScript?

Javascript Solutions

Solution 1 - Javascript

This will do it for you:

var yourSelect = document.getElementById( "your-select-id" );
alert( yourSelect.options[ yourSelect.selectedIndex ].value )

Solution 2 - Javascript

The .selectedIndex of the select object has an index; you can use that to index into the .options array.

Solution 3 - Javascript

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

Solution 4 - Javascript

Using the selectedOptions property:

var yourSelect = document.getElementById("your-select-id");
alert(yourSelect.selectedOptions[0].value);

It works in all browsers except Internet Explorer.

Categories
Recommended Javascript Solutions
Recommended Html Solutions
Recommended Html Select Solutions

Previous Solution:

Difference between MBCS and UTF-8 on Windows

WindowsUnicodeCharacter EncodingMbcs

Next Solution:

How to tell emacs to open .h file in C++ mode?

Emacs

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPaul D. WaiteView Question on Stackoverflow
Solution 1 - JavascriptPatView Answer on Stackoverflow
Solution 2 - JavascriptAmberView Answer on Stackoverflow
Solution 3 - JavascriptIr CalifView Answer on Stackoverflow
Solution 4 - JavascriptFinesseView Answer on Stackoverflow