In this post, we will see how to get total items from DropDownList using jQuery. We will use the button to display the total items in the Label.
Let’s say we have DropDownList like this:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="0">SELECT</asp:ListItem>
<asp:ListItem Value="1">APPLE</asp:ListItem>
<asp:ListItem Value="2">BANANA</asp:ListItem>
<asp:ListItem Value="3">ORANGE</asp:ListItem>
<asp:ListItem Value="4">MANGO</asp:ListItem>
</asp:DropDownList>
To find out the total items when button is clicked and display in the Label, do this:
<input id="btnClick" type="button" value=" Click " />
<asp:Label ID="Label1" runat="server"></asp:Label>
Here is the code used to get the total items from DropDownList and display in the Label when button will be clicked.
<script type="text/javascript">
$(function () {
$("#btnClick").click(function () {
var len = $("#<%=DropDownList1.ClientID %> option").length;
$("#<%=Label1.ClientID %>").text("Total items: " + len);
});
});
</script>
Here’s an example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnClick").click(function () {
var len = $("#<%=DropDownList1.ClientID %> option").length;
$("#<%=Label1.ClientID %>").text("Total items: " + len);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="0">SELECT</asp:ListItem>
<asp:ListItem Value="1">APPLE</asp:ListItem>
<asp:ListItem Value="2">BANANA</asp:ListItem>
<asp:ListItem Value="3">ORANGE</asp:ListItem>
<asp:ListItem Value="4">MANGO</asp:ListItem>
</asp:DropDownList>
<br />
<input id="btnClick" type="button" value=" Click " />
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Output
Download
DropDownList-total-items-count.rar (673.00 bytes)
See live demo