JQuery size () method is used to count DOM element’s by specifying matched elements. In this demo I am try to show you, how we can count specified DOM element s on the matched condition. In this demo multiple <option> element is define in <select> element and I want to count <option> element as a total number of cities.
Syntax :$( “document”).size ();
Code:
<title>JQuery size method</title>
<script type="text/javascript" src="jquery.min.js </script>
<script type="text/javascript">
var x;
$(document).ready(function() {
$("button").click(function
{
x = $("option").size();//size function will count <option> element that contained cities name where x variable will store size of <option> element that define in <select> element
alert('Total Cities...' + x.toString());//this line will show total number of cities
});
});
</script>
</head>
<body>
<h2>
JQuery size method</h2>
<table width="200">
<tr>
<td align="center">
City List
</td>
</tr>
<tr>
<td>
<select>
<option>Allahabad</option>
<option>Varanasi</option>
<option>Lucknow</option>
<option>Kanpur</option>
<option>Fridabad</option>
<option>Mumbai</option>
<option>Chandigarh</option>
</select>
</td>
<td>
<button>
Total Cities</button>
</td>
</tr>
</table>
</body>
Screenshot
If I will click on button we will get total number of cities as shown below:
Leave a Comment
1 Comments