Code Snippets

This article is about moving values or items between one multiple select box to another. Here i have given the html and the javascript code and have explained the working of it.

I have two multiple select box. One is leftSelect and another is RightSelect.

In between that i have two buttons one is to move items to the right select box and the other is to move items to the left select box.

I have statically filled the left select box with simple values and items and if you want to know how to add values dynamically then you can refer this same code where i have used .add method.

The code is

the left select box is with id=’leftSelect’ and the right select box is id=’rightSelect’

<select class='sel' id='leftSelect' multiple>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
<option value='5'>five</option>
<option value='6'>six</option>
</select>
 
<input type='button' value='>>' onclick='move(0)'>
<input type='button' value='<<' onclick='move(1)'>
 
<select class='sel' id='rightSelect' multiple>
</select>

the right select box is empty the reason is that i am just giving a demo with empty. if you want you can fill it up with values.

the >> button will move the selected values form the left select to right select and the << button will do the reverse. For both the buttons i have called move with value 0 to mean moving to right and value 1 meaning moving left. Now you can see the javascript function which manipulates these select boxes.

function move(direction)
{
	var src = document.getElementById('leftSelect' )
	var trg = document.getElementById('rightSelect' )	
	var tem
 
	if(direction)
	{
		tem = src
		src = trg
		trg = tem
	}
 
	var selected = []
 
	for(var i in src.options)
	{
		if(src.options[i].selected)
		{
			trg.options.add(new Option(src.options[i].text, src.options[i].value));
			selected.unshift(i);
		}
	}
 
	for(i in selected)
		src.options.remove(selected[i]);
}

How does it work?
The working of this function is it copies the selected items from one select box(source) to another(target) and deletes the selected items in the source.

The first for loop will copy the items from source to target.

while copying i am storing the index of the selected items in an array in the reverse order. the reason for reversing is to maintain the indexing of the selected items. to know why reverse is used use selected.push instead of .unshift and see the effect. and the reason for copying the selected item into an array instead of instantly deleting it is because of opera browser. In this browser when an item is deleted all the elements in the select box are deselected.

The second for loop will delete the selected items from the source one by one iterating the array.

How does it work in action?
when >> button is clicked i send 0 as parameter to mean from left to right. so values from left select box are copied to to right select box and the the selected items are deleted.

The condition if(direction) will not execute so left select is source and right select is target.

When << button is clicked i want to consider right select as source and left select as target so i pass 1 as parameter to move function. now the if(selected) works so right select becomes source and left becomes target so values will move from right select to left select. The reason for using this is i want to use the same function for both the operation that is one function to move values both sides. here is another alternate for swapping source and target.

 
var src = document.getElementById( direction ? 'rightSelect' : 'leftSelect' )
var trg = document.getElementById( direction ? 'leftSelect' : 'rightSelect' )
var tem
 
/*	
if(direction)
{
	tem = src
	src = trg
	trg = tem
	}
*/

Hope you can understand the difference. Remove the commented code so that it reduces space and the code becomes small and crisp. I did it the above for my purpose and including both for better understanding. if so.

Enjoy.