Subscribe
Please visit my new Web Site WWW.Codedisplay.com
asp:DropDownList is the server side control of asp.net & 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 asp.net 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:
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:
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="Label1">Asp.net
DropdownList</asp:Label><br />
<asp:DropDownList id="aspdropdown" runat="server" onchange="getDropdownListSelectedText();">
<asp:ListItem Value="Asp" Text="Free Asp.net 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 Asp.net Gridview articles/Code examples"></asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" ID="lblDropdownList"></asp:Label>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="Label1">Asp.net
DropdownList</asp:Label><br />
<asp:DropDownList id="aspdropdown" runat="server" onchange="getDropdownListSelectedText();">
<asp:ListItem Value="Asp" Text="Free Asp.net 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 Asp.net Gridview articles/Code examples"></asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" ID="lblDropdownList"></asp:Label>
</div>
</form>
</body>
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;
LabelDropdownList.innerHTML=sValue;
}
</script>
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;
LabelDropdownList.innerHTML=sValue;
}
</script>
Get Selected Value of HTML Select Option in javascript:
The HTML code for Combo Box is given below:
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="Label2">HTML Select Option</asp:Label><br />
<select name="HTMLSelect" onchange="getHTMLSelectOptionText();">
<option value="Asp">Free Asp.net 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 Asp.net Gridview articles/Code examples
</select>
<asp:Label runat="server" ID="lblSelectOptionText"></asp:Label>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="Label2">HTML Select Option</asp:Label><br />
<select name="HTMLSelect" onchange="getHTMLSelectOptionText();">
<option value="Asp">Free Asp.net 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 Asp.net Gridview articles/Code examples
</select>
<asp:Label runat="server" ID="lblSelectOptionText"></asp:Label>
</div>
</form>
</body>
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;
LabelDropdownList.innerHTML=sValue;
}
</script>
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;
LabelDropdownList.innerHTML=sValue;
}
</script>
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
Script tested for below browsers:
1. Internet Explorer.
2. Mozilla Firefox
3. Opera
4. Google Chrome
4 comments:
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....
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 asp.net 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
say
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 haikhan.a@gmail.com
Worked perfect - thank you, from Denver!
Fantastic! Thank you. Basically did cut and paste, changed to use my control name, bingo! Very nice of you to post.
I WOULD BE DELIGHTED TO HEAR FROM YOU