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>

2 thoughts on “Moving Options to Other Select Object

  1. Hi Dan,
    Thanks for your comment.
    Yes, CF8 has lots of new resources. Also the CFFORM tag is very useful for stuff like that.
    But if you see my code above, it is basically Javascript and can be used with any language.

Leave a Reply