Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Friday, 27 February 2015

When we work work with dropdownlist its sometime  required to get dropdownlist value, text or index at webpage. This can be done by doing some code at server side. 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 to avoid code we can also do this job at client end by using jQuery.
Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>
    <style type="text/css">
        .style1
        {
            width: 4px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width: 440px; height: 150px;">
                <legend><strong>Get DropDownList Selected Index, Value & Text Using jquery</strong></legend>
                <table>
                    <tr>
                        <td>&nbsp;</td>
                        <td class="style1">&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td>Select Day:
                    <asp:DropDownList ID="ddlWeekDays" runat="server" Width="150px">
                        <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 class="style1">&nbsp;</td>
                        <td>Selected Index :
                        </td>
                        <td>
                            <span id="spnIndex"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="style1">&nbsp;</td>
                        <td>Selected Value :
                        </td>
                        <td>
                            <span id="spnValue"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="style1">&nbsp;</td>
                        <td>Selected Text :
                        </td>
                        <td>
                            <span id="spnText"></span>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </form>
</body>

</html>


Categories: ,

0 comments:

Post a Comment