Javascript onchange Event to get SelectedIndex SelectedValue SelectedText of DropdownList C# VB.Net

asp:DropDownList is the server side control of commonly known as Combo Box. Most of the times developers need to find or get the Selected Index value, Selected Value & Selected Text. In my previous post i have described “Jquery to get SelectedValue SelectedIndex SelectedText of a DropdownList C# VB.Net“. In this post I will describe to read DropdownList SelectedIndex, SelectedValue & SelectedText using Javascript. Hope it will help & save time for developers.

Desired Output:
Javascript_ Selectedindex_Selectedvalue_Selectedtext_Dropdownlist_Csharp_VB.Net_chrome

To Complete the Javascript Code Example First Add asp:DropDownList Markup:

<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>
<hr />
<asp:Label runat="server" ID="lblDropdownList" Font-Bold="true"></asp:Label>

Now write the below Javascript Function:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20function%20getDropdownListSelectedText()%20%7B%0A%20%20%20%20%20%20%20%20var%20DropdownList%20%3D%20document.getElementById('%3C%25%3Daspdropdown.ClientID%20%25%3E')%3B%0A%20%20%20%20%20%20%20%20var%20SelectedIndex%20%3D%20DropdownList.selectedIndex%3B%0A%20%20%20%20%20%20%20%20var%20SelectedValue%20%3D%20DropdownList.value%3B%0A%20%20%20%20%20%20%20%20var%20SelectedText%20%3D%20DropdownList.options%5BDropdownList.selectedIndex%5D.text%3B%0A%0A%20%20%20%20%20%20%20%20var%20LabelDropdownList%20%3D%20document.getElementById('%3C%25%3DlblDropdownList.ClientID%20%25%3E')%3B%0A%20%20%20%20%20%20%20%20var%20sValue%20%3D%20'Selected%20Index%3A%20'%20%2B%20SelectedIndex%20%2B%20'%3Cbr%2F%3E%20Selected%20Value%3A%20'%20%2B%20SelectedValue%20%2B%20'%3Cbr%2F%3E%20Selected%20Text%3A%20'%20%2B%20SelectedText%3B%0A%0A%20%20%20%20%20%20%20%20LabelDropdownList.innerHTML%20%3D%20sValue%3B%0A%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Note: No server side code is required to test the example.

If you look at the javascript client side code you will found three different variables 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 writing the selected text into textbox, populating another dropdownlist, Using as a parameter in sql server query for filtering purposes etc…

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

Download Code Example C#        Download Code Example VB.Net

4 thoughts on “Javascript onchange Event to get SelectedIndex SelectedValue SelectedText of DropdownList C# VB.Net

  • January 20, 2015 at 6:56 pm

    great, this article helped me a lot in my work

  • July 23, 2015 at 11:23 am

    Thanks a million.It worked for me

  • April 30, 2016 at 8:09 pm

    How to make a javasript worked if the asp dropdown and textbox property is runat server.


Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code