Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net Dropdownlist SelectedIndexChanged Event in JQuery

Sep 1, 2012
Introduction

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.

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

Select Country:
Selected Text:
Selected text value:

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 RSS subscribe by email Subscribe by Email

11 comments :

MallaReddy said...

Hello suresh please provide concept of Delegates and Events in our blog.

katy said...

Amazing work!

click said...

That's a good point, I'll try your way.

anu said...

thank you sir

kasani said...

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

Anonymous said...

working fine

Unknown said...

Clean and neat... Keep your good work.

arif said...

i want to fetch record of first item without selecting dropdown

Unknown said...

Thank u, Working perfectly

Srinubabu Ravilla said...

If my dropdown list have AutoPostBack="true" it is not working.
Page is not preventing back from postback.
How can we resolve this.

Anonymous said...

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

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.