jQuery to Select the Comma Seperated Options
In this first jQuery tutorial we will develop a program that Comma seperated Options
Steps to develop the program
Step 1:
Create a new file (simple_carousel.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() {
$("#sc").multiSelect({ oneOrMoreSelected: '*' });
});
</script>
</HEAD>
<BODY>
<span id="callbackResult" style="display: none;">Callback
triggered!</span><br />
<select id="sc" name="control_6[]" 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>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</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
| $("#sc").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.