Get selected text/value from DropDownList (or) Select in jQuery

Introduction:

In this article i will explain how to get selected text/value from DropDownList (or) Select in jQuery.

Description:

In previous articles i explained How to clear items from DropDownList (or) Select in Java Script, How to clear items from DropDownList (or) Select in jQuery, How to get selected index from DropDownList (or) Select in Java Script, How to get selected index from DropDownList (or) Select in jQuery, and How to get selected text/value from DropDownList (or) Select in Java Script. Now i will explain how to get selected text/value from DropDownList (or) Select in jQuery.

Get selected text from DropDownList (or) Select in jQuery:

We can get selected text from DropDownList (or) Select by using following script:

Script:

var roleName = $('#ddlRole option:selected').text();
alert('Selected Role Name is: ' + roleName);

Get selected value from DropDownList (or) Select in jQuery:

We can get selected value from DropDownList (or) Select by using following script:

Script:

Method (1):

var roleId = $('#ddlRole option:selected').val();
alert('Selected Role Id is: ' + roleId);

Method (2):

var roleId = $('#ddlRole').val();
alert('Selected Role Id is: ' + roleId);

You can also find the complete example as shown below:

Full Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to get DropDownList Text and Value in jQuery</title>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GetDropDownText() {
            var roleName = $('#ddlRole option:selected').text();
            alert('Selected Role Name is: ' + roleName);
        }
        function GetDropDownValue() {
            var roleId = $('#ddlRole option:selected').val();
            alert('Selected Role Id is: ' + roleId);
        }
    </script>
</head>
<body>
    <div>
        <select id="ddlRole" class="form-control">
            <option value="-1">Select</option>
            <option value="1">User</option>
            <option value="2">Admin</option>
            <option value="3">Super Admin</option>
        </select>
        <input type="button" value="Get Text" onclick="GetDropDownText()" />
        <input type="button" value="Get Value" onclick="GetDropDownValue()" />
    </div>
</body>
</html>

Output:

In the above example you will see User role is selected. When GetText button is clicked, it is showing respective selected text for User role. When GetValue button is clicked, it is showing respective selected value for User role.

Note:

While working with jQuery, jQuery library file reference is mandatory. In the above example you will see jquery-1.11.1.min.js reference, added in header.

Created
Nov 11, 2014
Updated
Oct 03, 2020
Views
2,702

.prop() vs .attr() in jquery

How to get the selected text of a dropdown item using jQuery?

How to get the selected value of a dropdown item using jQuery?

How do I check whether a checkbox checked in jQuery?

Setting “checked” for a checkbox in jQuery?

How to check if an element exists in jQuery?

Set DropDownList value based on text/value in jQuery

Get selected index from DropDownList (or) Select in jQuery

Clear items from DropDownList (or) Select in jQuery.

How to replace string in JQuery?