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

Introduction:

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

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 and How to get selected index from DropDownList (or) Select in jQuery. Now i will explain how to get selected text/value from DropDownList (or) Select in Java Script.

Get selected text from DropDownList (or) Select in Java Script:

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

Script:

var ddl = document.getElementById('ddlRole');
alert('Selected Text is: ' + ddl.options[ddl.options.selectedIndex].text);

Get selected value from DropDownList (or) Select in Java Script:

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

Script:

var ddl = document.getElementById('ddlRole');
alert('Selected Value is: ' + ddl.options[ddl.options.selectedIndex].value);

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 Java Script</title>
    <script type="text/javascript">
        function GetDropDownText() {
            var ddl = document.getElementById('ddlRole');
            alert('Selected Text is: ' + ddl.options[ddl.options.selectedIndex].text);
        }
        function GetDropDownValue() {
            var ddl = document.getElementById('ddlRole');
            alert('Selected Value is: ' + ddl.options[ddl.options.selectedIndex].value);
        }
    </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 Super Admin role is selected. When GetText button is clicked, it is showing respective selected text for SuperAdmin role. When GetValue button is clicked, it is showing respective selected value for SuperAdmin role.

Created
Nov 11, 2014
Updated
Oct 03, 2020
Views
5,390

Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script

Set DropDownList value based on text/value in Java Script

Get selected index from DropDownList (or) Select in Java Script

Clear items from DropDownList (or) Select in Java script

How to validate number in Java Script

How to add or remove rows dynamically to HTML Table in Java Script

How to create HTML Table dynamically in Java Script

How to get or set value of a textbox in Java Script

How to get Key Codes in Java Script

How to replace string in Java Script?