Selektierte Werte aus einem SELECT-Objekt verschieben

Die JavaScript-Funktion verschiebt markierte Option-Elemente aus einem Form-Select-Objekt in ein anderes und wieder zurück. Auf diese Weise lassen sich vorhandene Elemente aus einer Liste nach Bedarf für eine individuelle Speicherung auswählen.

JavaScript-Code

<script type="text/javascript">

function push(act) {
 var from = act == 'sel' ? 'unsel' : 'sel';
 var to = act == 'sel' ? 'sel' : 'unsel';
 var obj_from = document.getElementById(from);
 var obj_to = document.getElementById(to);
 for (i=0; i < obj_from.options.length; i++) {
  if (obj_from.options.selected == true) {
   newEntry = new Option(obj_from.options.text,obj_from.options.value,false,true);
   obj_to.options[obj_to.options.length] = newEntry;
   obj_from.options = null;
   i--;
  }
 }
}

</script>

HTML-Code
<form method="post" name="form" action="/">
<table border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<select name="unsel[]" id="unsel" multiple="multiple" size="5">
<option value="3">Wert3</option>
<option value="9">Wert9</option>
<option value="8">Wert8</option>
<option value="7">Wert7</option>
</select>
</td>
<td>
<input type="button" value="›" onclick="push('sel')"><br>
<input type="button" value="‹" onclick="push('unsel')">
</td>
<td>
<select name="sel[]" id="sel" multiple="multiple" size="5">
<option value="5">Wert5</option>
</select>
</td>
</tr>
</table>
</form>

Beispiel

Zurück zur Web-Code-Lib