Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

Javascript- 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
javascript tutorial
javascript book
Buy this book