Thursday, August 6, 2009

Javascript How to get SelectedText from Asp Dropdownlist or HTML Select option

Please visit my new Web Site

asp:DropDownList is the server side control of & the drop down selection list is an element of HTML forms commonly know as Combo Box. Most of the times developers need to find or get the Selected Index value, Selected Value & Selected Text. In this post i will show you how one can write a cross-browser supported client side javascript to get Selected Index, Selected Text & Selected Value form server side control asp:DropDownList & HTML drop down selection list. Hope it will help & save time for developers. Click Here to read how to populate DropdownList. In this post this is the beyond of scope.

If you want Jquery solution then CLICK HERE.

Desired Output:

Fig: Shows the index no, selected value & selected text.

Get selected value of asp:dropdownlist in javascript:
So first add an aspx page into your project & paste the below HTML code for asp:dropdownlist under the form div section:
<form id="form1" runat="server">

<asp:Label runat="server" ID="Label1">
DropdownList</asp:Label><br />

<asp:DropDownList id="aspdropdown" runat="server" onchange="getDropdownListSelectedText();">

<asp:ListItem Value="Asp" Text="Free articles/Code examples"></asp:ListItem>
<asp:ListItem Value="Sqlserver" Text="Free Sql server articles/Code examples"></asp:ListItem>
<asp:ListItem Value="Javascript" Text="Free Javascript articles/Code examples"></asp:ListItem>
<asp:ListItem Value="XML" Text="Free XML articles/Code examples"></asp:ListItem>
<asp:ListItem Value="Gridview" Text="Free Gridview articles/Code examples"></asp:ListItem>


<asp:Label runat="server" ID="lblDropdownList"></asp:Label>


Now add the below client side cross browser javascript function under head tag:
<script type="text/javascript">
function getDropdownListSelectedText()
var DropdownList=document.getElementById('<%=aspdropdown.ClientID %>');
var SelectedIndex=DropdownList.selectedIndex;
var SelectedValue=DropdownList.value;
var SelectedText=DropdownList.options[DropdownList.selectedIndex].text;

var LabelDropdownList=document.getElementById('<%=lblDropdownList.ClientID %>');
var sValue='Index: '+SelectedIndex+' Selected Value: '+SelectedValue+' Selected Text: '+SelectedText;


Get Selected Value of HTML Select Option in javascript:
The HTML code for Combo Box is given below:
<form id="form1" runat="server">

<asp:Label runat="server" ID="Label2">HTML Select Option</asp:Label><br />

<select name="HTMLSelect" onchange="getHTMLSelectOptionText();">

<option value="Asp">Free articles/Code examples
<option value="Sqlserver">Free Sql server articles/Code examples
<option value="Javascript">Free Javascript articles/Code examples
<option value="XML">Free XML articles/Code examples
<option value="Gridview">Free Gridview articles/Code examples


<asp:Label runat="server" ID="lblSelectOptionText"></asp:Label>


Now add the below client side cross browser javascript function under head tag:
<script type="text/javascript">
function getHTMLSelectOptionText()
var SelectOption=document.form1.HTMLSelect;
var SelectedIndex=SelectOption.selectedIndex;
var SelectedValue=SelectOption.value;
var SelectedText=SelectOption.options[SelectOption.selectedIndex].text;

var LabelDropdownList=document.getElementById('<%=lblSelectOptionText.ClientID %>');
var sValue='Index: '+SelectedIndex+' Selected Value: '+SelectedValue+' Selected Text: '+SelectedText;


If you look at the javascript client side code you will found three different vaiables i have used to collect Selected Index, Selected Value & Selected Text value. You can use one of them which is required for you. Now you can do anything based on user selection such as write the selected text into textbox, populate another dropdownlist, Run sql server query for filtering purposes etc...

Script tested for below browsers:
1. Internet Explorer.
2. Mozilla Firefox
3. Opera
4. Google Chrome


Anonymous said...

Hi Shawpnendu,
I came accross this psot while searching for a combobox box...I am glad to say this article in some wasy helped a lot actually to complete one of my task....Not the whole code but only a single line of code helped me achieve my task...Even though I know about that before....I just realized by looking at it...Thanks heaps dude....

Anonymous said...

Hi Shawpendu,
nice article,
but not reachd what i required,
I am a beginner in development
My current requirement is to select the Panel to show or hide the unselected ... using a dropdown list control and javascript,
Its possible using Jquery 1.4.1.js to hide the Panel and show the panel with button click function #classorid.hide();

but i want this to work with dropdownlist onchange
i have classA,claasB,classC options to select in drpdown and Panel1,Panel2,Panel3 correspondingly
Pls help me to solve this...
you can mail me

Anonymous said...

Worked perfect - thank you, from Denver!

rick wannall said...

Fantastic! Thank you. Basically did cut and paste, changed to use my control name, bingo! Very nice of you to post.

Want to say something?

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash