[an error occurred while processing this directive]

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.

                         

[an error occurred while processing this directive]