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>
