Ricardo Parente's Blog

My friend Flavio asked me for a code to select some options from a select box and populate other that will be submitted with the form as the “chosen” options. I know that there are many forms to do that and there are on the web several tutorials using Javascript and extensions as jQuery, etc. 

I wrote a simple javascript with ideas from what I have seen on the web and it came out working good. So the credits are not all mine.
Download the code here

Here is the Javascript I called “moveSelectOptions.js”/*
By Ricardo Parente
October 20, 2008
rparente (at) cfdevelopers.net
*/
function moveIt(source,destination) {
   var oSource = document.getElementById(source);
   if (!hasOptions(oSource)) return;
var oDestination = document.getElementById(destination);
var aValue = new Array();
var aText = new Array();
for (var i=0; i< oSource.options.length; i++) {
if (oSource.options[i].selected) {
oDestination.options[oDestination.options.length] = new Option(oSource.options[i].text, oSource.options[i].value);
} 
}
var x=0;
for (i=0; i< oSource.options.length; i++) {
if (!oSource.options[i].selected) {
aValue[x]=oSource.options[i].value;
aText[x]=oSource.options[i].text;
x++;
}
}
oSource.options.length = 0;
for (i=0; i< x; i++) {
oSource.options[i] = new Option(aText[i], aValue[i]);
}
}
function selectAll(source) {
var oSource = document.getElementById(source);
if (!hasOptions(oSource)) return;
for (var i=0; i < oSource.options.length; i++) {
oSource.options[i].selected = true;
}
}
function hasOptions(obj) {
if (obj!=null && obj.options!=null) return true; 
return false;
}

Here is a form for testing the code: “moveSelectOptions.cfm”:
Insert this javascript call in the head section:
<script language="JavaScript" src="moveSelectOptions.js" type="text/javascript"></script>
Body section:<cfoutput>
<cfif structkeyExists(form,"destination")>
<cfdump var="#form#" />
</cfif>
<form name="myform" action="#cgi.script_name#" method="post" onsubmit="selectAll('destination');selectAll('source');">
</cfoutput>
<table>
<tr>
<td valign="top">From:
<td valign="top">
<select name="source" multiple size="5" style="width:150px;">
<option value="apples">Apples
<option value="oranges">Oranges
<option value="grapes">Grapes
<option value="tomatoes">Tomatoes
<option value="potatoes">Potatoes
<option value="pears">Pears
</select>
</td>
<td align="center" valign="top">
<input type="Button" value=">>" onclick="moveIt('source','destination');" />
<input type="Button" value="<<" onclick="moveIt('destination','source');" />
<input type="Button" value="All >>" onclick="selectAll('source');moveIt('source','destination');" /><br/>
<input type="Button" value="<< All" onclick="selectAll('destination');moveIt('destination','source');" /><br/>
</td>
<td valign="top">To:</td>
<td valign="top">
<select name="destination" multiple size="5" style="width:150px;">
</select>
</td>
</tr>
<tr>
<td colspan="5" align="right"><input type="Submit" value="Send" /></td>
</tr>
</table>
</form>