Move data from one select box to other select box

This example shows how to have two columns of data moved back and forth. You simply select the items and click the single arrow to move them. Click the double arrow to move the entire column of data.<html>
<head>
<style>
.inputF { width=170; height=150; background-color:white }
</style><script language=”javascript”>
<!–
function move(n, from, to) {
   if (document.layers) {
      fromObj = document.layers[from];
      to = document.layers[to];
  } else if (document.all) {
      fromObj = document.all(from);
      to = document.all(to);
  }
   if (n == 1 || n == 2) {
      var indTo = to.length-1;
      for (i=fromObj.length-1; i>=0; i–) {
             if (n==1 || fromObj.options[i].selected) {
                 indTo++;
                 to.options[indTo] = new Option(fromObj.options[i].text, fromObj.options[i].value);
                 fromObj.options[i] = null;
             }
      }
  } else if (n == 3 || n == 4) {
         var indFrom = fromObj.length-1;
         for (i=to.length-1; i>=0; i–) {
               if (n==4 || to.options[i].selected) {
               indFrom++;
               fromObj.options[indFrom] = new Option(to.options[i].text, to.options[i].value);
               to.options[i] = null;
                        }
               }
     }
}function manageBtns() {
  var select = “chosen”;
  var avail = “fruits”;
  if (document.layers) {
      var sel = document.layers[select];
      var av = document.layers[avail];
      } else if (document.all) {
      var sel = document.all(select);
      var av = document.all(avail);
    }
      if (sel.length <= 0) {
      document.testform.btnR.disabled = true;
      document.testform.btnRR.disabled = true;
    } else {
       document.testform.btnR.disabled = false; document.testform.btnRR.disabled = false; }
       if (av.length <=0) {
       document.testform.btnL.disabled = true;
        document.testform.btnLL.disabled = true;
      } else {
         document.testform.btnL.disabled = false;
         document.testform.btnLL.disabled = false;
      }
}
function deleteFrom() {
    for (i=0; i<document.testform.elements.length-1; i++) {
           if (document.testform.elements[i].tagName.indexOf(“SELECT”) && document.testform.elements[i].id.indexOf(“af”)) {
                                                   alert(“Cislo: “+i+” Name: “+document.testform.elements[i].tagName);
                                  }
                 }
}
–!>
</script>
</head>
<body> <FORM NAME=”testform”><table><tr>
<td>Available Fruits:</td>
<td></td>
<td>Your favorite:</td>
</tr><tr>
<td>
<SELECT multiple class=”inputF” NAME=”fruits” ID=”af”>
<option>Apples
<option>Peaches
<option>Pear
<option>Banana
<option>strawberry
<option> Oranges
<option>Grapes
</select>
</td>
<td>
<INPUT TYPE=”button” VALUE=”>>” STYLE=”{width=25;}” NAME=”btnLL” onClick=”javascript: move(1, ‘fruits’, ‘chosen’); manageBtns(); return false;”><br>
<INPUT TYPE=”button” VALUE=”>” STYLE=”{width=25;}” NAME=”btnL” onClick=”javascript: move(2, ‘fruits’, ‘chosen’); manageBtns(); return false;”><br>
<INPUT TYPE=”button” VALUE=”<” STYLE=”{width=25;}” NAME=”btnR” onClick=”javascript: move(3, ‘fruits’, ‘chosen’); manageBtns(); return false;”><br>
<INPUT TYPE=”button” VALUE=”<<” STYLE=”{width=25;}” NAME=”btnRR” onClick=”javascript: move(4, ‘fruits’, ‘chosen’); manageBtns(); return false;”>
</td>
<td><SELECT multiple CLASS=”inputF” NAME=”chosen”></td>
</tr></table>
</form>
<script>
manageBtns();
</script></body></html>

Page contents: itechies.net – Move data from one column to other column