There are loads of code example out there for this. Your question is better suited in the
JS area of the forum......Anyhow I used this a fair while ago. This moves the items from one multiple select area to another onclick. It is cut and paste code.
<html>
<HEAD>
<title>Mulitiple swap on click</title>
<SCRIPT LANGUAGE="JavaScript">
function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options[i].text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options[i].selected) {
arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
document.choiceForm.choiceBox.options[i] = null;
}
}
boxLength = document.choiceForm.choiceBox.length;
}
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options[i].value;
}
else {
strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
}
count++;
}
}
if (strValues.length == 0) {
alert("You have made no selection(s)");
}
else {
alert("Here are the values you've selected:\r\n" + strValues);
choiceForm.valuesForInsert.value = strValues;
choiceForm.submit();
}
}
//// adminGroups multiple select swap code finish
function validate()
{
if(document.choiceForm.groupname.value=="")
{
alert("You must enter a group name");
document.choiceForm.groupname.focus();
return(false);
}
if(document.choiceForm.gDescription.value=="")
{
alert("Please enter a brief description, you may edit this anytime");
document.choiceForm.gDescription.focus();
return(false);
}
saveMe();
//return (true);
}
function groupValidate()
{
if(document.adminGroupsComments.suggestionString.v alue=="")
{
alert("You must enter a suggestion");
document.adminGroupsComments.suggestionString.focu s();
return(false);
}
return (true);
}
</script>
</HEAD>
<BODY>
<form name="choiceForm" action="#" method="post">
<input type="hidden" name="selectedValues" value="0">
<input type="hidden" name="valuesForInsert" value="0">
<table border="0">
<tr>
<td valign="top" width=175>Available Countries:<br>
<select name="available" size=10 onchange="moveOver();">
<option value="1">Australia
<option value="2">New Zealand
<option value="3">USA
<option value="4">Canada
<option value="5">England
<option value="6">Switzerland
<option value="7">Russia
<option value="8">France
<option value="9">Italy
<option value="10">Samoa
</select></td>
<td valign="top">Your Choices:<input type="button" value="Remove" onclick="removeMe();"><br><select multiple name="choiceBox" style="width:150;" size="10"></select></td>
</tr>
<tr>
<td colspan=2 height=10><input type="button" value="Get Selected Values" onclick="saveMe();"></td>
</tr>
</table>
</form>
</body>
</html>