Home / code / javascript / scripts

Swap selects

Writer: Christophe Wolfs
Published: 27 March 2008

Swap values from one select table to another.
To transfer the values we glued them together (comma seperated). Use "explode()" in php to seperate them.

Put this in the HEAD-section:

<script language="javascript">
//Code provided by http://www.webmaster2020.com
function Toevoegen()
{
  var Office=document.frmMain.office;
  var Event=document.frmMain.uid;
  var GekozenWaarde='';
  var GekozenText='';

  if(document.frmMain.office.selectedIndex > 0)
  {
        while(document.frmMain.office.selectedIndex > 0)
        {
          GekozenWaarde=Office.options[Office.selectedIndex].value;
          GekozenText=Office.options[Office.selectedIndex].text;
          Event.options[Event.options.length]=new Option(GekozenText ,GekozenWaarde);
          Office.options[Office.selectedIndex]=null;
        }
        Office.options[0].selected=true;
  }
}

function Verwijderen()
{
  var Office=document.frmMain.office;
  var Event=document.frmMain.uid;
  var GekozenWaarde='';
  var GekozenText='';

  if(document.frmMain.uid.selectedIndex > 0)
  {
        while(document.frmMain.uid.selectedIndex > 0)
        {
          GekozenWaarde=Event.options[Event.selectedIndex].value;
          GekozenText=Event.options[Event.selectedIndex].text;
          Office.options[Office.options.length]=new Option(GekozenText ,GekozenWaarde);
          Event.options[Event.selectedIndex]=null;
        }
        Event.options[0].selected=true;
  }
}

function Send()
{
 if(document.frmMain.uid.length-1 > 0)
 {
   for(i=0;i<=document.frmMain.uid.length-1;++i)
   {
        if(document.frmMain.uid.options[i].value!='#')
        {
          document.frmMain.uids.value+=document.frmMain.uid.options[i].value +",";
        }
   }
 }

 return true;
}
</script>


Your form should look like this: 

<form action='somefile.php' method=post name='frmMain' onSubmit="return Send()">
<table>
 <tr>
  <td>Available</td>
  <td> </td>
  <td>Selected</td>
 </tr><tr>
  <td>
        <select name="office" size="10" multiple ondblclick="Toevoegen()">
          <option value="#">---------- Available ----------</option>

          <option value='1'>Test 1</option>
          <option value='2'>Test 2</option>
          <option value='3'>Test 3</option>
        </select>
  </td><td>
        <input type="button" name="add" value=">>" onClick="Toevoegen();" class='button'><br><br>
        <input type="button" name="remove" value="<<" onClick="Verwijderen();" class='button'>
  </td><td>
        <select name="uid" size="10" multiple ondblclick="Verwijderen()">
          <option value="#">---------- Member ----------</option>
        </select>
  </td>
 </tr><tr>
  <td colspan=2><input type=submit value='SAVE' class='button'></td>
 </tr>
</table>
</form>

 

TOP