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
Here is a full example
Create a new Asp.net 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="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DropDownList</title>
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript"
language="javascript">
$(document).ready(function() {
$('#cmdAddItems).click(function(event)
{
event.preventDefault();
$('#drpCountry').append("<option value=\"IND\">India</option>");
});
});
</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 />
<asp:Button ID="cmdAddItems"
runat="server"
Text="Add Items" />
</div>
</form>
</body>
</html>
No comments:
Post a Comment