Description:
In this article, I
will explain how to add data to dropdown list using append and prepend method.
If we want to add data
at the beginning with the dropdown list, we can use prepend () method.
$('#idofdropdown').prepend
($('<option></option>').val('Value').html('Text'));
If we want to add data at the end, we can use append ()
method.
$('#idofdropdown).append
($('<option></option>').val('Value').html('Text'));
If we
want to add blank data at the beginning with the dropdown list,
$('#idofdropdown').prepend
($('<option></option>').val('0').html('--Select--'));
If you want to add data to dropdown based on some event, you can do by the following ways.
In the following example, I am adding dropdown values based on click event. Here, I am adding data to dropdown using append () and prepend () method.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnAppendDD').click(function () { ('#ddlCountry').append($('<option></option>').val('England').html('England'));
return
false;
});
$('#btnPrependDD').click(function () { $('#ddlCountry').prepend($('<option></option>').val('Africa').html('Africa'));
return false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:DropDownList ID="ddlCountry" runat="server">
<asp:ListItem>India</asp:ListItem>
<asp:ListItem>Pakistan</asp:ListItem>
<asp:ListItem>Australia</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnAppendDD" runat="server" Text="Append Dropdown" />
<asp:Button ID="btnPrependDD" runat="server" Text="Prepend Dropdown" />
</div>
</form>
</body>
</html>
0 comments:
Post a Comment