New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

Download multiple select box widget

Put this into your <HEAD> section

	<style type="text/css">


	.multipleSelectBoxControl span{	/* Labels above select boxes*/
		font-family:arial;
		font-size:11px;
		font-weight:bold;
	}
	.multipleSelectBoxControl div select{	/* Select box layout */
		font-family:arial;
		height:100%;
	}
	.multipleSelectBoxControl input{	/* Small butons */
		width:25px;	
	}
	
	.multipleSelectBoxControl div{
		float:left;
	}
		
	.multipleSelectBoxDiv
	</style>
	<script type="text/javascript">
	
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
	
		
	var fromBoxArray = new Array();
	var toBoxArray = new Array();
	var selectBoxIndex = 0;
	var arrayOfItemsToSelect = new Array();
	
	
	function moveSingleElement()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
		var tmpFromBox;
		var tmpToBox;
		if(this.tagName.toLowerCase()=='select'){			
			tmpFromBox = this;
			if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
		}else{
		
			if(this.value.indexOf('>')>=0){
				tmpFromBox = fromBoxArray[selectBoxIndex];
				tmpToBox = toBoxArray[selectBoxIndex];			
			}else{
				tmpFromBox = toBoxArray[selectBoxIndex];
				tmpToBox = fromBoxArray[selectBoxIndex];	
			}
		}
		
		for(var no=0;no<tmpFromBox.options.length;no++){
			if(tmpFromBox.options[no].selected){
				tmpFromBox.options[no].selected = false;
				tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
				
				for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
					tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
					tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
					tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
				}
				no = no -1;
				tmpFromBox.options.length = tmpFromBox.options.length-1;
											
			}			
		}
		
		
		var tmpTextArray = new Array();
		for(var no=0;no<tmpFromBox.options.length;no++){
			tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);			
		}
		tmpTextArray.sort();
		var tmpTextArray2 = new Array();
		for(var no=0;no<tmpToBox.options.length;no++){
			tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);			
		}		
		tmpTextArray2.sort();
		
		for(var no=0;no<tmpTextArray.length;no++){
			var items = tmpTextArray[no].split('___');
			tmpFromBox.options[no] = new Option(items[0],items[1]);
			
		}		
		
		for(var no=0;no<tmpTextArray2.length;no++){
			var items = tmpTextArray2[no].split('___');
			tmpToBox.options[no] = new Option(items[0],items[1]);			
		}
	}
	
	function sortAllElement(boxRef)
	{
		var tmpTextArray2 = new Array();
		for(var no=0;no<boxRef.options.length;no++){
			tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);			
		}		
		tmpTextArray2.sort();		
		for(var no=0;no<tmpTextArray2.length;no++){
			var items = tmpTextArray2[no].split('___');
			boxRef.options[no] = new Option(items[0],items[1]);			
		}		
		
	}
	function moveAllElements()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
		var tmpFromBox;
		var tmpToBox;		
		if(this.value.indexOf('>')>=0){
			tmpFromBox = fromBoxArray[selectBoxIndex];
			tmpToBox = toBoxArray[selectBoxIndex];			
		}else{
			tmpFromBox = toBoxArray[selectBoxIndex];
			tmpToBox = fromBoxArray[selectBoxIndex];	
		}
		
		for(var no=0;no<tmpFromBox.options.length;no++){
			tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);			
		}	
		
		tmpFromBox.options.length=0;
		sortAllElement(tmpToBox);
		
	}
	
	
	/* This function highlights options in the "to-boxes". It is needed if the values should be remembered after submit. Call this function onsubmit for your form */
	function multipleSelectOnSubmit()
	{
		for(var no=0;no<arrayOfItemsToSelect.length;no++){
			var obj = arrayOfItemsToSelect[no];
			for(var no2=0;no2<obj.options.length;no2++){
				obj.options[no2].selected = true;
			}
		}
		
	}
	
	function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
	{		
		fromObj = document.getElementById(fromBox);
		toObj = document.getElementById(toBox);
		
		arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;

		
		fromObj.ondblclick = moveSingleElement;
		toObj.ondblclick = moveSingleElement;

		
		fromBoxArray.push(fromObj);
		toBoxArray.push(toObj);
		
		var parentEl = fromObj.parentNode;
		
		var parentDiv = document.createElement('DIV');
		parentDiv.className='multipleSelectBoxControl';
		parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
		parentDiv.style.width = totalWidth + 'px';
		parentDiv.style.height = totalHeight + 'px';
		parentEl.insertBefore(parentDiv,fromObj);
		
		
		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelLeft;
		subDiv.appendChild(label);
		
		subDiv.appendChild(fromObj);
		subDiv.className = 'multipleSelectBoxDiv';
		parentDiv.appendChild(subDiv);
		
		
		var buttonDiv = document.createElement('DIV');
		buttonDiv.style.verticalAlign = 'middle';
		buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
		buttonDiv.style.width = '30px';
		buttonDiv.style.textAlign = 'center';
		parentDiv.appendChild(buttonDiv);
		
		var buttonRight = document.createElement('INPUT');
		buttonRight.type='button';
		buttonRight.value = '>';
		buttonDiv.appendChild(buttonRight);	
		buttonRight.onclick = moveSingleElement;	
		
		var buttonAllRight = document.createElement('INPUT');
		buttonAllRight.type='button';
		buttonAllRight.value = '>>';
		buttonAllRight.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllRight);		
		
		var buttonLeft = document.createElement('INPUT');
		buttonLeft.style.marginTop='10px';
		buttonLeft.type='button';
		buttonLeft.value = '<';
		buttonLeft.onclick = moveSingleElement;
		buttonDiv.appendChild(buttonLeft);		
		
		var buttonAllLeft = document.createElement('INPUT');
		buttonAllLeft.type='button';
		buttonAllLeft.value = '<<';
		buttonAllLeft.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllLeft);
		
		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelRight;
		subDiv.appendChild(label);
				
		subDiv.appendChild(toObj);
		parentDiv.appendChild(subDiv);		
		
		toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
		fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';

			
		selectBoxIndex++;
		
	}
	
	
	
	</script>

Put this into your <BODY> section

<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">
<select multiple name="fromBox" id="fromBox">
	<option value="3">Finland</option>
	<option value="4">France</option>
	<option value="6">Mexico</option>
	<option value="1">Norway</option>
	<option value="5">Spain</option>	
	<option value="2">United Kingdom</option>
</select>
<select multiple name="toBox" id="toBox">
	<option value="12">Canada</option>
	<option value="13">Germany</option>
	<option value="11">United States</option>
</select>
</form>
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>
<p>You move elements by clicking on the buttons or by double clicking on select box items</p>

Configuration

You create two multiple selectboxes like this:
<select multiple name="fromBox" id="fromBox">
  <option value="3">Finland</option>
  <option value="4">France</option>
  <option value="6">Mexico</option>
  <option value="1">Norway</option>
  <option value="5">Spain</option>
  <option value="2">United Kingdom</option>
</select>
<select multiple name="toBox[]" id="topBox">
  <option value="12">Canada</option>
  <option value="13">Germany</option>
  <option value="11">United States</option>
</select>

Then you call a javascript function which initializes the script:
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>

The arguments to this function are:

"fromBox" - the id of the first selectbox(<select multiple name="fromBox" id="fromBox">)
"toBox" - the id of the last selectbox(<select multiple name="toBox[]" id="toBox">)
500 - Total width of widget
300 - Total height of widget
"Available countries" - Label above first select box
"Selected countries" - Label above last select box

Submit the form

When you submit a form, only the selected elements in a select box is submitted. This means that you need some Javascript that selects all the elements in your select box when the form is submitted. This could be an onsubmit event to your form. Example:
<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">

Comments

Does nt works like the demo, what i have to do?

fer at 01:59PM, 2011/04/23.

Hi,I'm trying to use this Ajax script with php. When i write $values = $_POST['toBox'];echo $values;It should print all the values of list box 'toBox'But it is not doing that.Can someone help?Thanks

Warren at 12:48PM, 2011/04/27.

Admin comment

Fer,I need more info from you in order to help you. What happen when you try this script?Warren,Make sure that you have added the onsubmit event to your <form> tag:<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">

DHTMLGoodies at 02:58PM, 2011/04/27.

Hi there,As it is given above:The arguments to this function are:* "fromBox" - the id of the first selectbox()* "toBox" - the id of the last selectbox()Basically, according to my requirement I want the user to select items from AVAILABLE and it will go in SElECTED. Now whatever is selected, i want those values to go in my MySql Query.Here is the example.In PHP as you know, if you want to print all the values of a list/select box, we use $_POST['toBox'];I want the value of 'toBox' to be print in this manner: '12','13','11'For this i'm using a function called implode$mySelect = implode("','",$_POST['toBox']);$countries = "'".$mySelect1."'";echo $countries;Now here it doesn't print any value. It just give me ''If i removecreateMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); and write the same code it works perfectly fine

Warren at 04:55AM, 2011/05/01.

Should view Demo

kabir at 08:41AM, 2011/06/27.

This is useful. But I want values that it fetch from database based on that i have to select options...

Ganesh B at 07:00AM, 2011/08/06.

HiThis is really helpful, but how can I keep the selected values in the selected box, so that users can delete or add more to the currently selected?

Matt at 08:33PM, 2011/10/03.

very very googtanks

mahdi at 02:25PM, 2012/01/31.

hello, the scripts is so good... but i cant pass all "vars" in "toBox"... how i can get it... i call a "multipleSelectOnSubmit" function when the form submit... like as the sample... thanks.

hello... at 05:48PM, 2012/02/07.

i found a little problem in the file that you have to download... in this line:<select multiple name="toBox" id="toBox">when i read your sample appear...<select multiple name="toBox[]" id="toBox">

a little problem in the sample at 05:57PM, 2012/02/07.

Please help , post some example how can this SELECTED countries can be added into MYQSL with PHP. I try $_REQUEST['toBox[]']; and $_POST['toBox[]'];but can't get any result.And i have added onsubmit='multipleSelectOnSubmit()'; in the FORM.Thanks

Please Help at 10:16PM, 2012/05/19.

Been using this for years. Suddenly when I move an item from "First" to "Second" list, it deletes 2 items in the "First" list. Not true going the other way though, if I move from the "Second" list to the "First" list, only the item selected is removed.

James D Smith at 07:16PM, 2019/09/10.

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.