Friday, October 19, 2012 jQuery dropdown add items

In this post, we will see on how to add additional items to an existing Dropdown list

To add items to an existing dropdown we can use the append() function as follows.  $('yourDropDown') .append("<option value=\"1\">Test</option>");

Here is a full example

Create a new page, copy the entire code below, change reference of the jQuery file src="JavaScript/jquery-1.7.2.js" to point to your local directory. Build and run the application, click on the Add Items buttons and notice that a new Country India is added to the drpCountry dropdown.

<html xmlns="" >
<head runat="server">
    <script type="text/javascript"
    <script type="text/javascript"
    $(document).ready(function() {
      $('#drpCountry').append("<option     value=\"IND\">India</option>"); 
    <form id="fromDropDownList" runat="server">
        <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 />       
        <asp:Button ID="cmdAddItems"
Text="Add Items" />

Search Flipkart Products:

No comments: