Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Friday, 5 June 2015

Introduction

In this article I will explain how to use jQuery to set dropdownlist selected value or text based on value / text with the help of jQuery.


Set dropdownlist selected value based on text:
Write the following code:
// Set Dropdownlist Selected Value by Text
$('#btnText').click(function () {
var selectedText = Sales;
$('#ddlusers option').map(function () {
if ($(this).text() == selectedText) return this;
}).attr('selected', 'selected');
})

Set dropdownlist selected value based on value :
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');
})

Source Code for Sample Application:
Design your webpage as given below:
<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 = 'Sales';
            $('#ddlDept option').map(function () {
                if ($(this).text() == selectedText) return this;
            }).attr('selected', 'selected');
        })
        // Set Dropdownlist Selected Value by Value
        $('#btnValue').click(function () {
            var selectedValue = '3';
            $('#ddlDept option').map(function () {
                if ($(this).val() == selectedValue) return this;
            }).attr('selected', 'selected');
        })
    })
</script>
</head>

<body>
<form id="form1" runat="server">
 <fieldset style="width:250px">
    <legend><strong>Set Default Value OF dropdown </strong></legend>
<div>
<asp:DropDownList ID="ddlDept" runat="server">
<asp:ListItem Value="1">HR</asp:ListItem>
<asp:ListItem Value="2">Marketing</asp:ListItem>
<asp:ListItem Value="3">Production</asp:ListItem>
<asp:ListItem Value="4">Sales</asp:ListItem>
<asp:ListItem Value="5">Inventory</asp:ListItem>
</asp:DropDownList>
</div><br /><input type="button" value="Set By Text" id="btnText" />
<input type="button" value="Set By Value" id="btnValue" />
</fieldset>
</form>
</body>

</html>
Categories: , ,

0 comments:

Post a Comment