JavaScript: Add selected items of listbox to other listbox?

**softwareguy74** · May 19th, 2003, 11:46 AM

I want to place to listboxes (drop-down with multi-select on) on a web page. I want to provide 2 buttons, "Add To List", "Remove From List". When the user clicks the "Add To List" button, I want the selected items in listbox1 to move over to listbox2. When they click on "Remove From List", I want the selected items in listbox2 to move back over to listbox1. Is this possible with JavaScript?

Any help or examples would be greatly appreciated.

Dan

**Danial** · May 27th, 2003, 04:33 AM

Originally posted by dbassettt74
I want to place to listboxes (drop-down with multi-select on) on a web page. I want to provide 2 buttons, "Add To List", "Remove From List". When the user clicks the "Add To List" button, I want the selected items in listbox1 to move over to listbox2. When they click on "Remove From List", I want the selected items in listbox2 to move back over to listbox1. Is this possible with JavaScript?

Any help or examples would be greatly appreciated.

Dan

Yes Dan, its very much possible with JavaScript. Here is an example that i used in one of my project.

VBF does not allow html file to be uploaded so i changed the extention of the file to .txt, change it back to .html after you download.

Hope this helps.

Danial

**softwareguy74** · May 27th, 2003, 10:11 AM

Thanks, it worked perfectly!!

**softwareguy74** · May 27th, 2003, 10:24 AM

Is there anyway to get away from using the "temp" object to store the add items? Like maybe an array instead? I don't want to show an empty listbox on the screen. Can you help me with this?

**sebs** · May 27th, 2003, 10:35 AM

Hi

here's an example is just did on the fly !

i did'nt put any remove or reset !

Code:

<HTML>
<script language=javascript>
	function addIt(newValue, newText){
		var newOption = new Option(newText,newValue,false,false);
		document.forms[0].dest.options[document.forms[0].dest.length] = newOption;	
	}

</script>
<form>
<SELECT name=src size=8 onChange="addIt(this[this.selectedIndex].value,this[this.selectedIndex].text);">
	<OPTION VALUE=1>Item 1</OPTION>
	<OPTION VALUE=2>Item 2</OPTION>	
	<OPTION VALUE=3>Item 3</OPTION>	
	<OPTION VALUE=4>Item 4</OPTION>	
	<OPTION VALUE=5>Item 5</OPTION>	
</SELECT>

<SELECT name=dest size=8>

</SELECT>
</form>
</HTML>

good luck

**Danial** · May 28th, 2003, 03:16 PM

Originally posted by dbassettt74
Is there anyway to get away from using the "temp" object to store the add items? Like maybe an array instead? I don't want to show an empty listbox on the screen. Can you help me with this?

Hi Dan,
You can use style tag to make the temp listbox invisible,
<select name=temp size=0 style="visibility:hidden"></select>

And yes indeed you can use array, you will need a multi dimentional array to store both the value and text of the each item(notice that my code allows you to move multiple items from one listbox to another).

I havent used multi dimenational array in JavaScript that much and i was in a hurry thats why i choose to use a temp lisbox instead. You could give it a go if you wish. i will give it a try if i get time.

Danial

Thread: JavaScript: Add selected items of listbox to other listbox?

Thread Tools

Display

JavaScript: Add selected items of listbox to other listbox?

Re: JavaScript: Add selected items of listbox to other listbox?

Posting Permissions