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 Get Dropdown Selected value and text in JavaScript

Sep 1, 2012
Introduction

Here I will explain how to get dropdownlist selected value or selected item text using JavaScript in asp.net.

Description:
  
In previous article I explained Fire Dropdownlist selectedindexchanged event  and many articles relating to JavaScript. Now I will explain how to get dropdownlist selected value using JavaScript in asp.net.

If we want to get dropdownlist selected value or selected item text in JavaScript we need to write the code like as shown below


<script type="text/javascript">
function GetCountryDetails() {
// Get id of dropdownlist
var parm = document.getElementById("ddlCountry");
// Get Dropdownlist selected item text
document.getElementById('lbltxt').innerHTML = parm.options[parm.selectedIndex].text;
// Get Dropdownlist selected value item
document.getElementById('lblid').innerHTML = parm.options[parm.selectedIndex].value;
}
</script>
If you want check this code in sample check below code

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Get Dropdownlist selected value and text in JavaScript</title>
<script type="text/javascript">
function GetCountryDetails() {
// Get id of dropdownlist
var parm = document.getElementById("ddlCountry");
// Get Dropdownlist selected item text
document.getElementById('lbltxt').innerHTML = parm.options[parm.selectedIndex].text;
// Get Dropdownlist selected value item
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

1 comments :

Anonymous said...

Good Job

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.