Introduction:
Here I will explain how to use jQuery to set dropdownlist selected value or text based on value / text or jQuery set dropdownlist value based on value or text with example. By using jQuery map functions we can set dropdownlist selected value based on value or text.
Description:
In previous articles I explained jQuery autocomplete textbox with masterpage in asp.net, filter gridview with dropdownlist using filter expression in asp.net, jQuery UI datepicker with master page example, get selected values from dropdownlist in angularjs, jQuery show asp.net exception message in ajax calls and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to set dropdownlist selected value or text based on value / text in jQuery.
In previous articles I explained jQuery autocomplete textbox with masterpage in asp.net, filter gridview with dropdownlist using filter expression in asp.net, jQuery UI datepicker with master page example, get selected values from dropdownlist in angularjs, jQuery show asp.net exception message in ajax calls and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to set dropdownlist selected value or text based on value / text in jQuery.
To
set dropdownlist selected value based on
text we need to write the code like as shown below
// Set Dropdownlist Selected Value by Text
$('#btnText').click(function () {
var selectedText = 'Rohini';
$('#ddlusers option').map(function () {
if ($(this).text()
== selectedText) return this;
}).attr('selected', 'selected');
})
|
To
set dropdownlist selected value based on
value we need to write the code like as shown below
// Set Dropdownlist Selected Value by Value
$('#btnValue').click(function () {
var selectedValue = '3';
$('#ddlusers option').map(function () {
if ($(this).val()
== selectedValue) return this;
}).attr('selected', 'selected');
})
|
If
you want to check it in complete example open your aspx page and write
following code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>set dropdownlist
selected value in asp.net</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
// Set Dropdownlist Selected Value by Text
$('#btnText').click(function () {
var selectedText = 'Rohini';
$('#ddlusers option').map(function () {
if ($(this).text()
== selectedText) return this;
}).attr('selected', 'selected');
})
// Set Dropdownlist Selected Value by Value
$('#btnValue').click(function () {
var selectedValue = '3';
$('#ddlusers option').map(function () {
if ($(this).val()
== selectedValue) return this;
}).attr('selected', 'selected');
})
})
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<select id ="ddlusers">
<option value ="1">Suresh</option>
<option value ="2">Rohini</option>
<option value ="3">Madhav</option>
<option value ="4">Mahendra</option>
<option value ="5">Honey</option>
</select>
</div>
<input type="button"
value="Set By
Text" id="btnText"
/>
<input type="button"
value="Set By
Value" id="btnValue"
/>
</form>
</body>
</html>
|
Live Demo
For live demo please click on below buttons to change dropdownlist selected value
Select Name: |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
Thanks admin.
Thank you for sharing...
Thank you Sir. it works like a charm
Note: Only a member of this blog may post a comment.