Simple Item Selector Using jQuery

Exclusive offer: get 50% off this eBook here
Learning jQuery 1.3

Learning jQuery 1.3 — Save 50%

Better Interaction Design and Web Development with Simple JavaScript Techniques

$23.99    $12.00
by K.Vivekanand | September 2009 | AJAX Open Source Web Development

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.

(For more resources on jQuery, see here.)

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)

K.Vivekanand

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

K.Vivekanand

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/selectall.jpg" class="selectall"
onclick="selectAll('fromSelectBox')" /><input type="image"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/deselectall.jpg" class="deselectall" onclick="clearAll('fromSelectBox')" />
</div>
<!-- From Container [Close] -->
<!-- Buttons Container -->
<div class="buttons_container">
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/topmost.jpg" id="topmost" /><br />
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/moveup.jpg" id="moveup" /><br />
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/moveright.jpg" id="moveright" /><br />
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/moveleft.jpg" id="moveleft" /><br />
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/movedown.jpg" id="movedown" /><br />
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/selectall.jpg" class="selectall"
onclick="selectAll('toSelectBox')" /><input type="image"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/deselectall.jpg" class="deselectall" onclick="clearAll('toSelectBox')" />
</div>
<!-- To Container [Close] -->
<!-- To Container -->
<div class="ascdes_container">
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/ascending.jpg" id="ascendingorder"
style="margin:1px 0px 2px 0px;" onclick="ascOrderFunction()" /><br />
<input type="image" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="images/descending.jpg" id="descendingorder"
onclick="desOrderFunction()" />
</div>
<!-- To Container [Close] -->
<div style="clear:both"></div>
</div>
<!-- Container [Close] -->
Learning jQuery 1.3 Better Interaction Design and Web Development with Simple JavaScript Techniques
Published: February 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(For more resources on jQuery, see here.)

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="/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.


Further resources on this subject:


Learning jQuery 1.3 Better Interaction Design and Web Development with Simple JavaScript Techniques
Published: February 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

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.

Books From Packt

Learning jQuery 1.3
Learning jQuery 1.3

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

jQuery 1.3 with PHP
jQuery 1.3 with PHP

AJAX and PHP: Building Modern Web Applications 2nd Edition
AJAX and PHP: Building Modern Web Applications 2nd Edition

Apache MyFaces 1.2 Web Application Development
Apache MyFaces 1.2 Web Application Development

Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

Joomla! with Flash
Joomla! with Flash

Spring Persistence with Hibernate
Spring Persistence with Hibernate

Blender 3D 2.49 Incredible Machines
Blender 3D 2.49 Incredible Machines

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software