Set DropDownList value based on text/value in jQuery

Introduction:

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

Set DropDownList value based on text in jQuery:

We can set DropDownList value based on text by using following script:

Script:

var selectedText = 'Admin';
// Now set dropdown selected option to 'Admin'.
$('#ddlRole option').map(function () {
    if ($(this).text() == selectedText) return this;
}).attr('selected', 'selected');

In the above code we are finding all the options inside the ddlRole dropdown by using below code.

$('#ddlRole option')

It finds all the options present in the ddlRole dropdown. Then we are calling .map() jQuery method. It checks the condition for each option.

if ($(this).text() == selectedText) return this;

In the above statement this means the current option for which it is checking, when it satisfies the condition then it returns the option. After that we applying attribute to it.

Set DropDownList value based on value in jQuery:

We can set DropDownList value based on value by using following script:

Script:

var selectedValue = '3';
$('#ddlRole option').map(function () {
    if ($(this).val() == selectedValue) return this;
}).attr('selected', 'selected');

Here we have one more way to do this as shown below:

var selectedValue = '3';
$('#ddlRole').val(selectedValue);

You can also find the complete example as shown below with screen shots:

Full Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to get DropDownList value based on text/value in jQuery</title>
    <script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function SetDropDownByText() {
            // Now set dropdown selected option to 'Admin'.
            var selectedText = 'Admin';
            $('#ddlRole option').map(function () {
                if ($(this).text() == selectedText) return this;
            }).attr('selected', 'selected');
        }
        function SetDropDownByValue() {
            var selectedValue = '3';
            $('#ddlRole option').map(function () {
                if ($(this).val() == selectedValue) return this;
            }).attr('selected', 'selected');
        }
    </script>
</head>
<body>
    <div>
        <select id="ddlRole">
            <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="Set By Text" onclick="SetDropDownByText()" />
        <input type="button" value="Set By Value" onclick="SetDropDownByValue()" />
    </div>
</body>
</html>

Output: