jQuery get selected text from SELECT (or DROPDOWN) list box

Most of the time in JavaScript we want to do following things with Select (or dropdown) list box.

– Get the value of selected option – Get the text of selected option – Get the text of option using its value

We can use jQuery for all of the above tasks. jQuery provide very simple one line solution for all of them. Find below code snippet of all three one by one.

Code Snippet:

// Select list box
<select id="dropdown">
    <option value="0">Sunday</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3" selected="selected">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
</select>

// Get the value of selected option
var selectedvalue = $('#dropdown').val();
alert(selectedvalue); // 3

// Get the text of selected option
var selectedText = $('#dropdown option:selected').text();
alert(selectedText); // Wednesday

// Get the text of option using its option value (eg: 5)
var textThroughValue = $("#dropdown option[value='5']").text();
alert(textThroughValue); // Friday