JavaScript Select List

I want to make one of those select lists like in AdWords when you choose the countries/regions but I don't know what it's called so it's hard to find tutorials or premade code for it.

The one I mean is when you get two TEXTAREAs, one left, one right. In between the two 2 buttons, one with arrow left (to move an item from right to left) and one with arrow right (to move an item from left to right). Sometimes a third with 'select all'.

In the left column you get all the options (I will load from database) and right is empty but will be filled with what you want to choose.

Can anyone help me locate a tutorial / code samples etc.?

 

Ty this
http://www.mattkruse.com/javascript/selectbox/index.html

 

Very 1995 but exactly what I meant, thanks!

 

I'm probably being daft on a late Friday afternoon-ish but how do you handle such a multi select form after it's being submitted?

A print_r($_POST) only yields the x and y coordinates.



EDIT: got a little bit closer... The SELECT name needs [] to indicate it will be an array, the code samples didn't mention that. But it actually only submits those highlighted in the right hand column, whereas it should submit all (also those not highlighted)... I guess the submit button needs an 'onclick select all' kind of element? I'm so crap at JavaScript

EDIT: For those of you following each episode of this monologue, here's the solution... Tried to scrape it from Google AdWords but their 14 included .js src-es are so damn complicated I had to frigg about for ages...

Problem: Those options moved to the right hand select don't get selected automatically...
Solution: onClick event upon form submission...

<script language="javascript">
function select_all_options() {
	var optionsSel = document.getElementById('targetOptions');
	for (var i = 0; i < optionsSel.length; i++) {
    optionsSel.options[i].selected = true;
	}
}

</script>

//then format the right hand select (amend from tutorial above) as such:
<SELECT NAME="list21[]" ID="targetOptions" MULTIPLE SIZE=10 onDblClick="moveSelectedOptions(this.form['list21[]'],this.form['list11'],false)">

//then the submit button...

<input type="image" src="/button_submit.gif" border="0" alt="Submit" title=" Submit " onClick="select_all_options()";>

Code (markup):

I'm glad to know all of you can sleep well now... Thanks for listening...