Transferir datos a diferentes listas

Un script que es un poco más largo pero que puede resulta muy útil. Se utiliza para transferir datos de una lista que desfila a otra lista a medida que el visitante elige las opciones. Así, obtiene una lista de selección que puede tratar por correo o PHP. En este caso, sólo describiremos el método de transferencia.

Primero, copie este script en el encabezamiento de su página:

<SCRIPT LANGUAGE="JavaScript">
<!--

function moveOver() {
   var boxLength = document.choiceForm.choiceBox.length;
   var selectedItem = document.choiceForm.available.selectedIndex;
   var selectedText = document.choiceForm.available.options[selectedItem].text;
   var selectedValue = document.choiceForm.available.options[selectedItem].value;
   var i;
   var isNew = true;
   if (boxLength != 0) {
     for (i = 0; i < boxLength; i++) {
       thisitem = document.choiceForm.choiceBox.options[i].text;
       if (thisitem == selectedText) {
         isNew = false;
         break;
       }
     }
   }
   if (isNew) {
     newoption = new Option(selectedText, selectedValue, false, false);
     document.choiceForm.choiceBox.options[boxLength] = newoption;
   }
   document.choiceForm.available.selectedIndex=-1;
}

function removeMe() {
   var boxLength = document.choiceForm.choiceBox.length;
   arrSelected = new Array();
   var count = 0;
   for (i = 0; i < boxLength; i++) {
     if (document.choiceForm.choiceBox.options[i].selected) {
       arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
     }
     count++;
   }
   var x;
   for (i = 0; i < boxLength; i++) {
     for (x = 0; x < arrSelected.length; x++) {
       if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
         document.choiceForm.choiceBox.options[i] = null;
       }
     }
     boxLength = document.choiceForm.choiceBox.length;
   }
}
// -->
</script>

Después, coloque el formulario en sus páginas, de la siguiente manera:

<form name="choiceForm">

Available workshops:
<br>
<select name="available" size=10 onchange="moveOver();">
<option value=1>DHTML
<option value=2>HTML
<option value=3>Java
<option value=4>JavaScript
<option value=5>PHP/MySQL
<option value=6>Référencement
<option value=7>Paint Shop Pro
<option value=8>Photoshop
<option value=9>Flash
<option value=10>Real Audio/Video
</select>

Your choice:
<br>
<select multiple name="choiceBox" style="width:150;" size="10">
</select>

<input type="button" value="Delete" onclick="removeMe();">
</form>

En esta lista, especifique simplemente las diferentes opciones disponibles para los visitantes (en este caso, DHTML, HTML, Java...) y personalice el texto en el formulario para obtener este resultado.