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
|
|||
13 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.
thank you sir
Hi Suresh Garu,
I need help on dropdown list with textbox,
for example if I enter a phone.no in textbox, the dropdown list should select the operator name automatic.
Is it possible to do that in script.
please help me on this
working fine
Clean and neat... Keep your good work.
i want to fetch record of first item without selecting dropdown
Thank u, Working perfectly
If my dropdown list have AutoPostBack="true" it is not working.
Page is not preventing back from postback.
How can we resolve this.
hi ,can u help me with ...to get jquey pop up when a item is selected from drop down menu ,and the pop up should contain custom msg
Thnaks Suresh.. It helped me
Doesn't work for me. Event doesn't fire at all. Code is in Content Placeholders on aspx page, and the change event does not fire at all when I select a country in the list. :-(.
Note: Only a member of this blog may post a comment.