#native_company# #native_desc#
#native_cta#

Move from one Multiple Select Box to Another

By Joe Zimmerman
on June 14, 2001

Version: .1

Type: Function

Category: HTML

License: GNU General Public License

Description: Displays two multiple select boxes, allowing you to move items from one to the other, then submit the values of both boxes. Uses JavaScript to submit only once.

<?
/*
Multiple Select Box Function
Written by Joe Zimmerman <[email protected]>

6-14-2001: Initial Release Version .1

Copyright (C) 2001 Joe Zimmerman

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
*/

/* Usage:

    $availableList=Array('1'=>'Project 1','3'=>'Project 3','4'=>'Project 4');
    $selectedList=Array('2'=>'Project 2','5'=>'Project5');
    MultiAvailSelectBox("Available Projects","My Projects",$availableList,$selectedList,'available','selected',10)

returns two arrays $available and $selected each containing what was left in each list box

Note: Duplicate key names will cause problems, this was designed intentionally so that there will be
an associated key with what you are selecting.

*/

function MultiAvailSelectBox($availableTitle,$selectedTitle,$availableList,$selectedList,$listAvailVar='listavail',$listSelVar='listsel',$size=5) {
?>
<SCRIPT LANGUAGE="JavaScript">
<!--
function SelectAll(selectItem) {
    var i;
    var j = 0;
    for (i = 0; i < selectItem.options.length; i++) {
         selectItem.options[j].selected = true;
         j++;
    }
}

function addItems(fromItem, toCtrl) {
    var i;
    var j;
    var itemexists;
    var nextitem;

    // step through all items in fromItem
    for (i = 0; i < fromItem.options.length; i++) {
         if (fromItem.options[i].selected) {
              // search toCtrl to see if duplicate
              j = 0;
              itemexists = false;
              while ((j < toCtrl.options.length) && (!(itemexists))) {
                   if (toCtrl.options[j].value == fromItem.options[i].value) {
                        itemexists = true;
                        alert(fromItem.options[i].value + " found!... Possibly a duplicate key in the arrays");
                   }
                   j++;
              }
              if (!(itemexists)) {
                   // add the item
                   nextitem = toCtrl.options.length;
                   toCtrl.options[nextitem] = new Option(fromItem.options[i].text);
                   toCtrl.options[nextitem].value = fromItem.options[i].value;
              }
         }
    }
}


function removeItems(fromItem) {
    var i = 0;
    var j;
    var k = 0;

    while (i < (fromItem.options.length - k)) {
         if (fromItem.options[i].selected) {
              // remove the item
              for (j = i; j < (fromItem.options.length - 1); j++) {
                   fromItem.options[j].text = fromItem.options[j+1].text;
                   fromItem.options[j].value = fromItem.options[j+1].value;
                   fromItem.options[j].selected = fromItem.options[j+1].selected;
              }
               k++;
         } else {
              i++;
         }
    }
    for (i = 0; i < k; i++) {
         fromItem.options[fromItem.options.length - 1] = null;
    }
}
//-->
</SCRIPT>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <th valign="top" width="45%"><?=$availableTitle?></th>
    <th valign="top" width="10%">&nbsp</th>
    <th valign="top" width="45%"><?=$selectedTitle?></th>
</tr>
<tr>
    <td align="center" valign="top">
         <select multiple name="<?=$listAvailVar?>[]" size="<?=$size?>">
<?
    while (list($key,$val)=each($availableList)) {
?>
              <option value="<?=$key?>"><?=$val?></option>
<?
    }
?>
         </select>
    </td>
    <td align="center" valign="center">
         <input type="button" name="AddBtn" value=" >> " OnClick="addItems(this.form.elements['<?=$listAvailVar?>[]'], this.form.elements['<?=$listSelVar?>[]']); removeItems(this.form.elements['<?=$listAvailVar?>[]']);"><br>
         <input type="button" name="RemoveBtn" value=" << " OnClick="addItems(this.form.elements['<?=$listSelVar?>[]'], this.form.elements['<?=$listAvailVar?>[]']); removeItems(this.form.elements['<?=$listSelVar?>[]']);">
    </td>
    <td align="center" valign="top">
         <select multiple name="<?=$listSelVar?>[]" size="<?=$size?>">
<?
    while (list($key,$val)=each($selectedList)) {
?>
              <option value="<?=$key?>"><?=$val?></option>
<?
    }
?>
         </select>
    </td>
</tr>
<tr>
    <td colspan="3" align="center" valign="center">
         <input type="button" value="Submit" OnClick="SelectAll(this.form.elements['<?=$listAvailVar?>[]']); SelectAll(this.form.elements['<?=$listSelVar?>[]']); this.form.submit();">
    </td>
</tr>
</table>
<?
}
?>

<?
// EXAMPLE USAGE
if (!isset($show)) {
?>
<form name="main" action="<?=$PHP_SELF?>" method="get">
<?
    $availableList=Array('1'=>'Project 1','3'=>'Project 3','4'=>'Project 4');
    $selectedList=Array('2'=>'Project 2');
    MultiAvailSelectBox("Available Projects","My Projects",$availableList,$selectedList,'available','selected',10)
?>
    <input type="hidden" name="show" value="yes">
</form>
<?
} else {
?>
<hr>
$available = <br>
<pre>
    <?print_r($available);?>
</pre>
<hr>
$selected = <br>
<pre>
    <?print_r($selected);?>
</pre>
<?
}
?>