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 JavaScript

Sep 1, 2012
Introduction

Here I will explain how to raise dropdownlist selectedindexchanged event in JavaScript 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 JavaScript using asp.net.

Generally we will use onchange event in JavScript to raise dropdownlist selectedindexchanged event in JavaScript like as shown below

<script type="text/javascript">
function GetCountryDetails() {
var parm = document.getElementById("ddlCountry");
var strUser = parm.options[parm.selectedIndex].text;
document.getElementById('lbltxt').innerHTML = strUser;
document.getElementById('lblid').innerHTML = parm.options[parm.selectedIndex].value;
}
</script>
<asp:DropDownList ID="ddlCountry" runat="server" onchange="GetCountryDetails()">
Example


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dropdownlist selectedindexchanged event in JavaScript</title>
<script type="text/javascript">
function GetCountryDetails() {
var parm = document.getElementById("ddlCountry");
var strCountry = parm.options[parm.selectedIndex].text;
document.getElementById('lbltxt').innerHTML = strCountry;
document.getElementById('lblid').innerHTML = parm.options[parm.selectedIndex].value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="50%">
<tr><td align="right">Select Country:</td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" onchange="GetCountryDetails()">
<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" style="font-family:Verdana; font-size:10pt; color:Black">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

7 comments :

Anjali said...

I want code for how to add comment on webpage

Goud said...

I want the Code Like Country Dropdownlist by Selecting respective country State dropdown records can be bind through JQuery

Anonymous said...

How to assign data to drop down list based condition from one dropdownlist to other dropdownlist with in single table.

Example :I have two droupdownlist(ddl1,ddl2)in this ddl1 I have a mangerslist(m1,m2..etc) & m1 contains emplyees(e1,e2,e5..etc)&m2 contains

employees(e3,e4..etc).If I select m1 in ddl1 I want to display e1,e2,e5..etc in ddl2

please help me.

note: m1,m2.etc and e1,e2,e3,e4,e5..etc all are containing in single table

victoria said...

Amazing work!

Unknown said...

Hi, your function is not working on Gridview dropdown onchange event.

click said...

You solve my JavaScript problme, thanks.

Unknown said...

But, it is not work with master page. How is that possible ?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 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.