How to Get the Text Value of Selected Option using jQuery

You can access two types of value from the <select> element. Based on your requirement, single or both values can get from the select element.

The first one is the value to be sent to the server, which can easily get using the jQuery.

$("#dropdownList").val();

The second one is the text value of the select element. In the example code, we will show how you can get the text value of the select using jQuery.

The following select box has some options with values, the text value of the selected option will be retrieved from this select element.

<select id="dropdownList">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

The following code will get the text value of the selected option using jQuery.

$(document).ready(function(){
    $('#dropdownList').on('change',function(){
        //var optionValue = $(this).val();
        //var optionText = $('#dropdownList option[value="'+optionValue+'"]').text();
        var optionText = $("#dropdownList option:selected").text();
        alert("Selected Option Text: "+optionText);
    });
});