jQuery to Count the Select Options
In this first jQuery tutorial we will develop a program that count the select option
Steps to develop the program
Step 1:
Create a new file (selectMulti1.html) and add the following code into
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="jquery.js" type="text/javascript"></script>
<script src="script/jquery.dimensions.js" type="text/javascript">
</script>
<script src="script/jqueryMultiSelect.js" type="text/javascript">
</script>
<link href="style/multiSelect.css" rel="stylesheet" type="text/css"/>
<script>
$(document).ready( function() {
$("#control_1, #control_3,
#control_4, #control_5").multiSelect();
});
</script>
</HEAD>
<BODY>
<select id="control_1" name="control_1[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
</select>
</BODY>
</HTML>
|
Program explanation:
The following code includes the jQuery JavaScript library file:
| <script src="script/jquery.dimensions.js" type="text/javascript"></script> <script src="script/jqueryMultiSelect.js" type="text/javascript"></script> |
Function is called
| $("#control_1, #control_3, #control_4, #control_5").multiSelect() |
When you run the program in browser it will look like following screen shot:
Check online demo of the application
Learn from experts! Attend jQuery Training classes.