Jquery to get SelectedValue SelectedIndex SelectedText of a DropdownList Asp.net C# VB.Net

In every project we have to do a lot of work on DropdownList in both server side and client side. Server side manipulation is easy rather than client side manipulation. Here in this article i will guide you completely on “How you can get or manipulate a C# or VB.Net Server Side DropdownList Control Selected Value, Selected Index & Selected Text by using JQuery code”. Because sometimes we need to work on Selected Value, Sometimes on Selected Index & Sometimes on Selected Text. So this article is a one stop article for you which will describe everything step by step with Jquery code example.

Before starting the example have a look at below output:
Using IE:
Jquery_Selectedvalue_ Selectedindex_Selectedtext_Dropdownlist_Csharp_VB.Net

Using Chrome:
Jquery_Selectedvalue_ Selectedindex_Selectedtext_Dropdownlist_Csharp_VB.Net_chrome

To continue the example please follow the steps:
1. Add Jquery Reference first

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

2. Add a DropDownList in your Markup

    <h2>To display Selectedvalue, Selectedindex & Selectedtext please select an item from the DropDownList</h2>
        <asp:DropDownList ID="DropDownList1" runat="server" >
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>
            <asp:ListItem Text="Three" Value="3"></asp:ListItem>
            <asp:ListItem Text="Four" Value="4"></asp:ListItem>
            <asp:ListItem Text="Five" Value="5"></asp:ListItem>
        <hr />

        <div id="info"></div>    

3. Finally Add the below JQuery Script to get Selected Index, Text & Value of the DropdownList

    <script type="text/javascript">
        $(function () {
            $('select[id$=DropDownList1]').bind("change keyup", function () {
                "<b>Selected Value:</b> " + $('#<%= DropDownList1.ClientID%>').val()+'</br>'+
                "<b>Selected Index:</b> " + $('#<%= DropDownList1.ClientID%>').get(0).selectedIndex + '</br>' +
                "<b>Selected Text:</b> " + $('select[id$=DropDownList1] :selected').text());

Code explanation:
The line $(‘#<%= DropDownList1.ClientID%>‘).val() will return you the selectedtext.

The line $(‘#<%= DropDownList1.ClientID%>‘).get(0).selectedIndex will return you the selectedindex

The line $(‘select[id$=DropDownList1] :selected’).text()) will return you selectedtext.

Here i have used 2 JQuery events change & keyup in bind method because the change event works in IE wheres keyup event works for Mozilla, Chrome and Safari.

Script Tested for the following browsers:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, JQuery, VB.Net
2 comments on “Jquery to get SelectedValue SelectedIndex SelectedText of a DropdownList Asp.net C# VB.Net
  1. abhishek says:

    This dropdownlist functionality is not working on server deploying of code.I made dropdownlist multiselect.

Leave a Reply

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