Get value of selected option of Select Box in jQuery

Goal : This tutorial will explain how to get the value of selected elements id,value and text of select box using jquery with example:

Below is the html code :

<select id="jqueryVersions" >

    <option>Select jquery version</option>

    <option id="id_1" value="value_1">Jqurey 1.9.1</option>

    <option id="id_2" value="value_2">Jqurey 1.8.1</option>

    <option id="id_3" value="value_3">Jqurey 1.7.1</option>

    <option id="id_4" value="value_4">Jqurey 1.6.1</option>

</select>    

Below is the jquery code to get the selected options value,text and id :

$("#jqueryVersions").change(function(){

        var selectedOption = $("#jqueryVersions :selected");

    

        var selectedText   = selectedOption.text());

        var selectedId       = selectedOption.attr("id");

        var selectedValue = selectedOption.val();

});

Click on this link to check demo

If you find this tutorial userful. please comment share this post. Thanks :)