Find the controls in a webform page Using JQuery

Finding the Controls using Jquery in aspx page

Find  the controls in a webform page Using JQuery.

Lets suppose we have a div in which we have multiple Controls and the reqirement is to find out all the IDs of the DropDownLists.The simplest and faster way is writing the Clientside using JQuery.

Here is the sample of the Designer file Where the Div contains DropDownLists.

<div id="sai">
        <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem Selected="True" Text="Sai1" Value="0"></asp:ListItem>
        <asp:ListItem Selected="false" Text="Sai2" Value="10"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai3" Value="02"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai4" Value="03"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem Selected="True" Text="Sai1" Value="0"></asp:ListItem>
        <asp:ListItem Selected="false" Text="Sai2" Value="10"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai3" Value="02"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai4" Value="03"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList3" runat="server">
        <asp:ListItem Selected="True" Text="Sai1" Value="0"></asp:ListItem>
        <asp:ListItem Selected="false" Text="Sai2" Value="10"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai3" Value="02"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai4" Value="03"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList4" runat="server">
        <asp:ListItem Selected="True" Text="Sai1" Value="0"></asp:ListItem>
        <asp:ListItem Selected="false" Text="Sai2" Value="10"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai3" Value="02"></asp:ListItem>
        <asp:ListItem Selected="False" Text="Sai4" Value="03"></asp:ListItem>
        </asp:DropDownList>
        
         <asp:Label ID="lblName" runat="server" ></asp:Label>
    </div>  


Here i have written a small logic so that all the Ids of the DropDownList are shown in the Label Text.


     $(document).ready(function () {
            var sa = [];
             $('#sai').children().each(function () {
                 if ($(this)[0].nodeName.toLowerCase() == "select") {
                    var s = $(this).attr("id");
                      sa.push(s);
                 }
             });

             $("#lblName").text(sa.toString());
        });

The Explanation for the above script goes lke this..

1.  We have Selected the Div using the DIV ID
2.  After selecting The DIV we are iterating throgth each of the Chind Control
        As we know while rendering the Dropdownlist are rendered by node name Select
3.   we are using that select node name and if condition satisfies then we are pushing the ID to already created array.
4.   Finally we are displaying it in the label text .