Cold Fusion Tips-N-Tricks
Javascript: Moving items from one multi-select box to another

Seems like everybody tends to shy away from this in websites - moving an item from one multi-select box to another.  I had to perform the same task so I thought I'd share the Javascript routines that made it easy.

What you need is two select boxes (of course) and two normal buttons to kick off a javascript routine.  Both buttons call the same routine but specify the select boxes in reverse order.

Syntax:
SelectMoveRows(<source select box>,<destination select box>);
Example:
SelectMoveRows(document.Example.Features,document.Example.FeatureCodes);

The way it works is that it will scan through the values of the source select box and if any rows that are selected, it will add it to the bottom of the destination select box and then remove it from the source select box.  Once it has scanned through the source select box, it will call a second function called "SelectSort" in order to sort the values of the destination select box using a simple bubble sort.  Note that the sort is a ASCII sort so if you have three rows with the values of "Row 1", "Row 2", and "Row 10", "Row 10" will be sorted between "Row 1" and "Row 2".

If you look at the example HTML attached below, both the Add and Remove buttons call the same Javascript function, however, the source and destination fields are reversed for the Remove button. (Make sure they're buttons, not submit buttons!)

This Javascript routine works for Internet Explorer 5+, Netscape 4.7, and Netscape 7.0

Example:









Example HTML/CFML code:
<html>
<head>
<title>Multi-list copy example</title>
<body>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
</script>
<form name="Example">
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <select name="Features" size="9" MULTIPLE>
                <option value="2">Row 2</option>
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
                <option value="6">Row 6</option>
                <option value="7">Row 7</option>
                <option value="8">Row 8</option>
                <option value="9">Row 9</option>
            </select>
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)">
        </td>
        <td>
            <select name="FeatureCodes" size="9" MULTIPLE>
                <option value="1">Row 1</option>
                <option value="3">Row 3</option>
            </select>
        </td>
    </tr>
</table>
</form>

</body>
</html>


Return to the Cold Fusion Tips-N-Tricks topic list