jQuery to get Asp.Net DropDownList Selected item value,text and index

Introduction: In this article I am going to explain How to get DropDownList selected item’s Index, Value and Text using jQuery in asp.net.
jQuery to get Asp.Net DropDownList Selected item value,text and index

Description:  While working on asp.net project, it is very common requirement to get the Dropdownlist ‘s selected item’s index or value or text. 

For that we have dropdownlist attributes like "SelectedIndex" to get the selected item’s index, "SelectedValue" to get the selected item’s value and "SelectedItem.Text" to get selected item’s text. But if we want to get these using jQuery then below is the solution.

Implementation: Let’s create a simple asp.net web page to demonstrate the concept.

HTML Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Example to get DropDownList selected item index, value and text</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%=ddlWeekDays.ClientID %>').on("change", function () {
                //Get DropDownlist selected item index
                var selectedIndex = $(this).find("option:selected").index();
                //Get DropDownlist selected item value
                var selectedValue = $(this).find("option:selected").val();
                //Get DropDownlist selected item text
                var selectedText = $(this).find("option:selected").text();
                $("#spnIndex").text(selectedIndex);
                $("#spnValue").text(selectedValue);
                $("#spnText").text(selectedText);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width: 380px; height: 150px;">
                <legend>Get DropDownList Selected item Index, Value and Text</legend>
                <table>
                    <tr>
                        <td>Select Day:
                    <asp:DropDownList ID="ddlWeekDays" runat="server">
                        <asp:ListItem Value="0" Text="Select"></asp:ListItem>
                        <asp:ListItem Value="1" Text="Monday"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Tuesday"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Wednesday"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Thursday"></asp:ListItem>
                        <asp:ListItem Value="5" Text="Friday"></asp:ListItem>
                        <asp:ListItem Value="6" Text="Saturday"></asp:ListItem>
                        <asp:ListItem Value="7" Text="Sunday"></asp:ListItem>
                    </asp:DropDownList>
                        </td>
                        <td>Selected Index :
                        </td>
                        <td>
                            <span id="spnIndex"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>Selected Value :
                        </td>
                        <td>
                            <span id="spnValue"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>Selected Text :
                        </td>
                        <td>
                            <span id="spnText"></span>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </form>
</body>

</html>

Now over to you:
" I hope you have got the solution to get Asp.Net DropDownList Selected item value,text and index using jquery and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..