Set DropDownList value based on text/value in jQuery

 JQuery     sbo     Updated on Nov 18, 2014     VIKRAM     3820   

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 ScriptHow to clear items from DropDownList (or) Select in jQueryHow to get selected index from DropDownList (or) Select in Java ScriptHow to get selected index from DropDownList (or) Select in jQueryHow 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:

This will be intial screen when we open it in browser.

When Set By Text button clicked, it will set the Admin as selected text for drop down.

When Set By Value button clicked, it will set the Super Admin as selected where Super Admin value is 3.

  Related Articles
Bind DropDownList using simple user defined method in ASP.Net
Set DropDownList value based on text/value in Java Script
Get selected text/value from DropDownList (or) Select in jQuery
Get selected text/value from DropDownList (or) Select in Java Script
Get selected index from DropDownList (or) Select in jQuery
Get selected index from DropDownList (or) Select in Java Script
Clear items from DropDownList (or) Select in Java script
Clear items from DropDownList (or) Select in jQuery.
  Recent Articles
Bind DropDownList using simple user defined method in ASP.Net
Set DropDownList value based on text/value in Java Script
Get selected text/value from DropDownList (or) Select in jQuery
Get selected text/value from DropDownList (or) Select in Java Script
Get selected index from DropDownList (or) Select in jQuery
Get selected index from DropDownList (or) Select in Java Script
Clear items from DropDownList (or) Select in Java script
Clear items from DropDownList (or) Select in jQuery.