Introduction:
Here I will explain how to raise dropdownlist selectedindexchanged event in jquery using asp.net.
Here I will explain how to raise dropdownlist selectedindexchanged event in jquery using asp.net.
Description:
In previous articles I explained How to bind dropdownlist using JQuery and how to get dropdownlist selected value and text using JQuery and many articles relating to JQuery. Now I will explain how to raise dropdownlist selectedindexchanged event in JQuery using asp.net.
In previous articles I explained How to bind dropdownlist using JQuery and how to get dropdownlist selected value and text using JQuery and many articles relating to JQuery. Now I will explain how to raise dropdownlist selectedindexchanged event in JQuery using asp.net.
Generally
we will use change event in JQuery to
raise dropdownlist selectedindexchanged event in JQuery like as shown below
$(document).ready(function() {
//Dropdownlist
Selectedindexchanged event
$('#ddlCountry').change(function()
{
// Get
Dropdownlist seleted item text
$("#lbltxt").text($("#ddlCountry option:selected").text());
// Get
Dropdownlist selected item value
$("#lblid").text($("#ddlCountry").val());
return false;
})
});
|
Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dropdownlist
selectedindexchanged event in jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Dropdownlist
Selectedchange event
$('#ddlCountry').change(function()
{
// Get Dropdownlist
seleted item text
$("#lbltxt").text($("#ddlCountry option:selected").text());
// Get
Dropdownlist selected item value
$("#lblid").text($("#ddlCountry").val());
return false;
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr><td align="right">Select
Country:</td>
<td><asp:DropDownList ID="ddlCountry" runat="server">
<asp:ListItem Text="Select" Value="0" />
<asp:ListItem Text="Australia" Value="1" />
<asp:ListItem Text="India" Value="2" />
<asp:ListItem Text="England" Value="3" />
<asp:ListItem Text="USA" Value="4" />
<asp:ListItem Text="China" Value="5" />
</asp:DropDownList></td>
</tr>
<tr><td align="right">Selected
Text:</td>
<td><b><label id="lbltxt" /></b></td>
</tr>
<tr><td align="right">Selected
text value:</td>
<td><b><label id="lblid" /></b></td>
</tr>
</table>
</form>
</body>
</html>
|
Demo
To
check demo change dropdown values
|
|
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 :
Hello suresh please provide concept of Delegates and Events in our blog.
Amazing work!
That's a good point, I'll try your way.