Dynmic Select List – Left or Right

[Total: 0    Average: 0/5]

This example shows how to move select list options from one select list to another.

Head Code:

<script>
function move_item(from, to)
{
  var f;
  var SI; /* selected Index */
  if(from.options.length>0)
  {
    for(i=0;i<from.length;i++)
    {
      if(from.options[i].selected)
      {
        SI=from.selectedIndex;
        f=from.options[SI].index;
        to.options[to.length]=new Option(from.options[SI].text,from.options[SI].value);
        from.options[f]=null;
        i--; /* make the loop go through them all */
      }
    }
  }
}
</script>

Body Code:

<form name="f1" method="GET">
<table border=0 class=wrap align=center cellpadding=3 cellspacing=0><tr><td>
<select name="items_left" multiple size=10>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
<option value=4>Four</option>
<option value=5>Five</option>
</select>
</td>
<td>
<input type="button" value = "     Add    >  " onClick="move_item(items_left, items_right)"><br>
<input type="button" value = "< Remove " onClick="move_item(items_right,items_left)">
</td>
<td>
<Select name="items_right" multiple size=10>
<option value=6>Six</option>
</Select>
</td></tr>
<tr><td colspan=3 align=center><input type=submit></td></tr>
</table>
</form>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *