jQuery is good enough to built outstanding web applications without any effort. jQuery is a JavaScript library whose size is only 19KB. In this article by K.Vivekanand, you will learn how to make use of some jQuery plug-ins while building a web application. Specifically, you will learn how to make a simple item selector. You can make use of this application while building a Shopping Cart, or if you want to select a unique item from different items present in your forms.

Adding jQuery to your page

You can download the latest version of jQuery from jQuery site (http://jquery.com/) and can be added as a reference to your web pages accordingly. You can reference a local copy of jQuery using <script> tag in the page. Either you can reference your local copy or you can directly reference remote copy from jQuery.com or Google Ajax API (http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js)

Prerequisite Knowledge

In order to understand the code, one should have the basic knowledge of HTML, CSS, JavaScript and basic knowledge of jQuery.

Ingredients Used

• HTML
• CSS
• jQuery
• Photoshop (Used for Designing of Image Buttons and Backgrounds)

Preview / Download

If you would like to see the working example, please do click here http://www.developersnippets.com/snippets/jquery/item_selector/item_selector.html). And if you would like to download the snippet, click here (http://www.developersnippets.com/snippets/jquery/item_selector/item_selector.zip)

Figure 1: Snapshot of "Simple Item Selector using jQuery"

Figure 2: Overview of div containers and image buttons used

Successfully tested

The above application has been successfully tested on various browsers like IE 6.0, IE 7, IE 8, Mozilla Firefox (Latest Version), Google Chrome and Safari Browser (4.0.2) respectively.

HTML Code

Below is the HTML code with comments for you to understand it better.

<!-- Container -->
<div id="container">
    <!-- From Container -->
    <div class="from_container">
      <select id="fromSelectBox" multiple="multiple">
       <option value="1">Adobe</option>
       <option value="2">Oracle</option>
       <option value="3">Google</option>
       <option value="4">Microsoft</option>
	   <option value="5">Google Talk</option>
	   <option value="6">Google Wave</option>
	   <option value="7">Microsoft Silver Light</option>
	   <option value="8">Adobe Flex Professional</option>
	   <option value="9">Oracle DataBase</option>
	   <option value="10">Microsoft Bing</option>
      </select><br />
      <input type="image" src="images/selectall.jpg" class="selectall" 
      onclick="selectAll('fromSelectBox')" /><input type="image" 
      src="images/deselectall.jpg" class="deselectall" onclick="clearAll('fromSelectBox')" />
    </div>
    <!-- From Container [Close] -->
    <!-- Buttons Container -->
    <div class="buttons_container">
        <input type="image" src="images/topmost.jpg" id="topmost" /><br />
        <input type="image" src="images/moveup.jpg" id="moveup" /><br />
        <input type="image" src="images/moveright.jpg" id="moveright" /><br />
        <input type="image" src="images/moveleft.jpg" id="moveleft" /><br />
        <input type="image" src="images/movedown.jpg" id="movedown" /><br />
        <input type="image" src="images/bottommost.jpg" id="bottommost" /><br />
    </div>
    <!-- Buttons Container [Close] -->
    <!-- To Container -->
    <div class="to_container">
	  <select id="toSelectBox" multiple="multiple"></select><br />
      <input type="image" src="images/selectall.jpg" class="selectall" 
      onclick="selectAll('toSelectBox')" /><input type="image" 
      src="images/deselectall.jpg" class="deselectall" onclick="clearAll('toSelectBox')" />
    </div>
    <!-- To Container [Close] -->
    <!-- To Container -->
    <div class="ascdes_container">
	  <input type="image" src="images/ascending.jpg" id="ascendingorder" 
          style="margin:1px 0px 2px 0px;" onclick="ascOrderFunction()" /><br />
      <input type="image" src="images/descending.jpg" id="descendingorder" 
      onclick="desOrderFunction()" />
    </div>
    <!-- To Container [Close] -->
    <div style="clear:both"></div>
</div>
<!-- Container [Close] -->

Better Interaction Design and Web Development with Simple JavaScript Techniques An introduction to jQuery that requires minimal programming experience Detailed solutions to specific client-side problems For web designers to create interactive elements for their designs For developers to create the best user interface for their web applications Packed with great examples, code, and clear explanations Revised and updated version of the first book to help you learn jQuery  http://www.packtpub.com/learning-jquery-1.3/book

Brief explanation of HTML Code

If you look at the above screenshot (figure 2), it has got four div containers which hold two select boxes, arrow buttons and ascending & descending order buttons. These four containers are present in one main container that is "container" div. In the first container (from_container), I have placed one select box, in the second container (buttons_container) I have placed all respective buttons like Move Up, Move Down, Move Left, Move Right, Move Top Most, Move Bottom Most, in the third container (to_container) I have placed another select box and in the last container that is ascdes_container I have placed two image icons for Ascending and Descending order. These were properly arranged using CSS Styles.

CSS Code with Explanation

/* Used background image and background color */
  body{background:url(images/bodybg.jpg) top repeat-x; background-color:#3285ef;} 
  
  /* Div Containers */
  .from_container, .buttons_container{
	float:left;
	text-align: center;
	margin: 10px;
  }
  
  .to_container{
	float:left;
	text-align: center;
	margin: 10px 0px 10px 10px;
  }
  
  /* Div Container for Ascending and Descending icons */
  .ascdes_container{
	float:left;
	margin: 10px 0px 0px 0px;
  }
  
  /* Styles for select box */
  select {
   width: 224px;
   height: 252px;
   *height: 246px; /* for IE Browers */
   border:1px #000033 solid;
   background-color:#b3d1fd;
   font-family:Arial, Helvetica, sans-serif;
   font-size:18px;
  }
  
  /* This is for img input */
  input{outline:none;}
  
  /* Whole main container which holds all div containers */
  #container{
  	margin:0 auto;
	background-color:#3285ef;
	padding:10px;
	width:570px;
	*width:580px; /* for IE Browers */
	clear:both;
  }

Explanation of jQuery Code

In order to work your jQuery code, as mentioned above in "Adding jQuery to your page" section, we need to include jQuery JavaScript file onto your web page using <script> tag.

<!-- jQuery -->
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

I have downloaded the jQuery file from jQuery site and kept on my local machine.

For Ascending and Descending order functionality, you need to include a plug-in shown below

<!-- Select Box PlugIn (for Ascending and Descending order)-->
<script type="text/javascript" src="/js/jquery.selectboxes.js"></script>

You can get the above plug-in at this location—http://jqueryjs.googlecode.com/svn/trunk/plugins/selectboxes/jquery.selectboxes.js

The above two .js files should be included in <head> tag in order to utilize those in our code.

jQuery Code

<script type="text/javascript">
$(document).ready(function() {
	//Moving selected item(s) to the select box provided on right
	$('#moveright').click(function() { 
		//If none of the items are selected, inform the user using an alert
		if(!isSelected("#fromSelectBox")){return;} 
		//If atleast one of the item is selected, initially the selected option 
would be 'removed' and then it is appended to 'toSelectBox' (select box)
		$('#fromSelectBox option:selected').remove().appendTo('#toSelectBox'); 
		return false;
	});
	
	//Moving selected item(s) to the select box provided on left
	$('#moveleft').click(function() {
		//If no items are present in 'toSelectBox' (or) if none of the items are 
selected inform the user using an alert
		if(!noOptions("#toSelectBox") || !isSelected("#toSelectBox")){return;} 
		//If atleast one of the item is selected, initially the selected option 
would be 'removed' and then it is appended to 'fromSelectBox' (select box)
		$('#toSelectBox option:selected').remove().appendTo('#fromSelectBox');
		return false;
	});
	
	//Moving selected item(s) upwards
	$('#moveup').click(function(){
		//If no items are present in 'toSelectBox' (or) if none of the items are 
selected inform the user using an alert
		if(!noOptions("#toSelectBox") || !isSelected("#toSelectBox")){return;}
		//If atleast one of the item is selected, through loop - the selected 
option would be moved upwards
		$('#toSelectBox 
option:selected').each(function(){$(this).insertBefore($(this).prev());});
		return false;
	});
	
	//Moving selected item(s) upwards
	$('#movedown').click(function(){
		//If no items are present in 'toSelectBox' (or) if none of the items are 
selected inform the user using an alert
		if(!noOptions("#toSelectBox") || !isSelected("#toSelectBox")){return;}
		//If atleast one of the item is selected, through loop - the selected 
option would be moved downwards
		var eleValue = $('#toSelectBox option:selected:last').next();
		$("#toSelectBox option:selected").each(function(){
			$(this).insertAfter(eleValue);
			eleValue = $(eleValue).next();
		});
		return false;
	});
	
	//Moving selected item(s) to topmost
	$('#topmost').click(function(){
		//If no items are present in 'toSelectBox' (or) if none of the items are 
selected inform the user using an alert
		if(!noOptions("#toSelectBox") || !isSelected("#toSelectBox")){return;}
		//If the selected item(s) index is greater than first item (option) 
index then move that item to the first position
		if($('#toSelectBox option:selected').attr('index') > $('#toSelectBox 
option:first').attr('index')){
			$('#toSelectBox option:selected').insertBefore($('#toSelectBox 
option:first'));
		}
		return false;
	});
	
	$('#bottommost').click(function(){
		//If no items are present in 'toSelectBox' (or) if none of the items are 
selected inform the user using an alert	
		if(!noOptions("#toSelectBox") || !isSelected("#toSelectBox")){return;}
		//If the selected item(s) index is less than last item (option) index then 
move that item to the last position
		if($('#toSelectBox option:selected').attr('index') < $('#toSelectBox 
option:last').attr('index')){
			$('#toSelectBox option:selected').insertAfter($('#toSelectBox 
option:last'));
		}
		return false;
	});
});

//The function given below is to validate the select box, if none of the item(s) is 
selected then it alerts saying 'Please select atleast one option' if user selects an item 
then it returns true
function isSelected(thisObj){
	if (!$(thisObj+" option:selected").length){
		alert("Please select atleast one option");
		return 0;
	}
	return 1;
}

//The function given below is to validate the select box, if none of the item(s) where 
present in the select box provided then it alerts saying 'There are no options to 
select/move' if select box has more than one item it returns true
function noOptions(thisObj){
	if(!$(thisObj+" option").length){
		alert("There are no options to select/move");
		return 0;
	}
	return 1;
}

//The function given below is to de-select all items if any of the item(s) are selected
function clearAll(thisObj){
	$('#'+thisObj).each(function(){$(this).find('option:selected').removeAttr("selected");});
}//function close

//The function given below is to select all items
function selectAll(thisObj){
	if(!noOptions("#"+thisObj)){return;}
	$('#'+thisObj+' option').each(function(){$(this).attr("selected","selected");});
}//function close

//The function given below is to arrange all items in Ascending Order [this is used 
from the plug-in which we have attached]
function ascOrderFunction(){
	$("#toSelectBox").sortOptions();
}//function close

//The function given below is to arrange all items in Descending Order [this is used 
from the plug-in which we have attached]
function desOrderFunction(){
	$("#toSelectBox").sortOptions(false);
}//function close

</script>

Uses of this Application

The following are the two scenarios in which you can use this application:

1. This simple application can be used in Shopping Cart applications providing options to select an item from various items.
2. Can be used in Registration form for selecting options. It is often used in Job sites for selecting different topics from various options provided.

There are numerous other similar scenarios where this application can be effectively used.

Summary

From the above article, you have learned how to move options from one select box to another using jQuery. We also saw how these items can be placed in an ascending or descending order. We also explored a few uses of this application.

Better Interaction Design and Web Development with Simple JavaScript Techniques An introduction to jQuery that requires minimal programming experience Detailed solutions to specific client-side problems For web designers to create interactive elements for their designs For developers to create the best user interface for their web applications Packed with great examples, code, and clear explanations Revised and updated version of the first book to help you learn jQuery  http://www.packtpub.com/learning-jquery-1.3/book

About the Author

K.Vivekanand works as a Software Engineer, and has good experience in Web Development and Web Designing environment. His core skills include HTML, CSS, XML, XSLT, Adobe Products - Photoshop, Flash, Flex (Basic Level), JavaScript, and Medium level knowledge on JavaScript API’s like ExtJS, Yahoo API, Google API, and MooTools. He also works on PHP projects. With some knowledge of C, C++, Java, JSP, JavaBeans, he also work on developing WordPress Themes, Joomla Themes. For more information visit: http://www.developersnippets.com.