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%"> </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> <? } ?>