Friday, August 10, 2012

Asp.Net jQuery loop through Dropdown


The jQuery library provides various options to work with Textboxes, in this post Asp.Net jQuery loop through Dropdown, we shall see on how to loop through all the Dropdown controls in the page and read the selected Index of each of the controls.

We can loop through all the Dropdowns in a page using the following jQuery script

// Loop Through DropDown and Get Selected IDs
$('select').each(function() {
alert($(this).attr('id') + ' => ' + $(this).prop("selectedIndex"));
});


Example
Create a new HTML/ASPX page 
Copy the below code.
Change the mapping of the jQuery file 
jquery-1.7.2.js to map to your local drive.
Run the application, Click on the Loop Dropdown Button to view the list of Dropdowns in the page and their selected index in message boxes.


<html xmlns="http://www.w3.org/1999/xhtml" >
<
head runat="server">
    <title>TextBox</title>
    <link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
language="javascript">
        $(document).ready(function() {
        //
        // Loop All DropDowns
        //
        $('#cmdLoop').click(function(event) {
            // Disable Postback
            event.preventDefault();
            // Loop Through DropDown and Get Selected IDs
            $('select').each(function() {
                alert($(this).attr('id') + ' => ' +  
                      $(this).prop("selectedIndex"));
            });
        });
   });
    </script>
</head>
<body>
    <form id="fromDropDownList" runat="server">
    <div>
        Country:
        <asp:DropDownList
             ID="drpCountry"
             runat="server">
            <asp:ListItem
                 Value="USA">United States</asp:ListItem>
            <asp:ListItem
                 Value="UK">United Kingdom</asp:ListItem>
        </asp:DropDownList><br /><br />
       
        Loop through all TextBoxes in the page:
        <asp:Button
             ID="cmdLoop"
             runat="server"
             Text="Loop DropDowns" />
    </div>
    </form>
</body>
</html>


Search Flipkart Products:
Flipkart.com

No comments: