This article basically talks about two things.

1) A Javascript code to move options from one multiple select box to another in a form.

Move options from one SELECT box to another:

There are two multiple SELECT boxes and one has got some OPTIONS in it. User can select one or more options from one and click on the Move button to transfer the selected options in to the other one. Similarly, the selected options from the second SELECT box can be moved back to the first one.

Here is the HTML Code:

<form action="" method="post">
  <table width="250" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100"><select name="SourceSelect[]" id="sourceSelect" size="5" multiple ondblclick="moveData(); return false;">
          <option value="1">America</option>
          <option value="2">Canada</option>
          <option value="3">China</option>
          <option value="4">England</option>
        </select></td>
      <td width="100" align="center" valign="middle"><input type="submit" name="forward" id="button" value=">>>>" onclick="moveData(); return false;"/>
        <input type="submit" name="back" id="button" value="<<<<" onclick="moveData('back'); return false;"/></td>
      <td align="left"><select name="DestinationSelect[]" id="destinationSelect" size="5" multiple="multiple" ondblclick="moveData('back'); return false;">
        </select></td>
    </tr>
  </table>
</form>

And here is the Javascript code:

<script type="text/javascript" language="javascript1.2">
function moveData(dir) {
	var sF = document.getElementById(((dir == "back")?"destinationSelect":"sourceSelect"));
	var dF = document.getElementById(((dir == "back")?"sourceSelect":"destinationSelect"));
	if(sF.length == 0 || sF.selectedIndex == -1) return;
	while (sF.selectedIndex != -1) {
		dF.options[dF.length] = new Option(sF.options[sF.selectedIndex].text, sF.options[sF.selectedIndex].value);
		sF.options[sF.selectedIndex] = null;
	}
}
</script>

The above code also allows you to double click on a select option to move it to the other.

ASK a Question!