Selectores (o combos) anidados con JavaScript (2ª parte)
En el anterior artículo describí como podíamos anidar dos etiquetas <select> utilizando JavaScript de tal manera que al seleccionar un ítem en el primero se actualizaban los ítems disponibles en el segundo.
En esta ocasión la funcionalidad es otra. En el primer <select> hay un conjunto de ítems disponibles (en el ejemplo, una lista de trabajadores). El segundo está vacío inicialmente. Hay tres botones en el formulario. Los dos primeros (con las leyendas "» »" y "« «") permiten pasar ítems del primero al segundo o viceversa. Cuando un ítem se intercambia de un combo a otro, no permanece una copia, sino que se elimina.
Por último, el botón Enviar hace lo propio de un botón <input type="submit"> pero la función de JavaScript a la que llama fuerza la selección múltiple del segundo combo para que todos esos valores sean pasados al destino.
Una utilidad o ejemplo: "seleccionar un equipo de trabajo entre los empleados de la empresa".
<html>
<head>
<title>Combos</title>
<script language="javascript">
function asignar( desde, hasta ) {
dsd = document.getElementById(desde);
if (dsd.selectedIndex != -1) {
valor = dsd.value;
txt = dsd.options[dsd.selectedIndex].text;
dsd.options[dsd.selectedIndex] = null;
if (hasta != "") {
hst = document.getElementById(hasta);
opc = new Option(txt, valor);
eval(hst.options[hst.options.length]=opc);
hst.disabled = false;
}
if (dsd.options.length == 0) dsd.disabled = true;
if (hst.options.length == 0) hst.disabled = true;
}
}
function marcarSelect( que ) {
slct = document.getElementById(que);
for ( var i = 0; i < slct.length; i++ ) {
slct.options[i].selected = true;
}
}
</script>
</head>
<body>
<form method="POST">
<table>
<tr><td>
<select id="combo1" name="combo1" size="5">
<option value="1">Trabajador 1</option>
<option value="2">Trabajador 2</option>
<option value="3">Trabajador 3</option>
<option value="4">Trabajador 4</option>
<option value="5">Trabajador 5</option>
<option value="6">Trabajador 6</option>
<option value="7">Trabajador 7</option>
<option value="8">Trabajador 8</option>
</select>
</td><td>
<input type=submit value="» »" onclick="asignar('combo1','combo2'); return false;"/>
<br/>
<input type=submit value="« «" onclick="asignar('combo2','combo1'); return false;"/>
</td><td>
<select id="combo2" name="combo2[]" multiple size="5" disabled>
</select>
</td></tr>
</table>
<br/>
<input type="submit" value="Enviar" onclick="marcarSelect('combo2');" />
</form>
</body>
</html>
En esta ocasión la funcionalidad es otra. En el primer <select> hay un conjunto de ítems disponibles (en el ejemplo, una lista de trabajadores). El segundo está vacío inicialmente. Hay tres botones en el formulario. Los dos primeros (con las leyendas "» »" y "« «") permiten pasar ítems del primero al segundo o viceversa. Cuando un ítem se intercambia de un combo a otro, no permanece una copia, sino que se elimina.
Por último, el botón Enviar hace lo propio de un botón <input type="submit"> pero la función de JavaScript a la que llama fuerza la selección múltiple del segundo combo para que todos esos valores sean pasados al destino.
Una utilidad o ejemplo: "seleccionar un equipo de trabajo entre los empleados de la empresa".
<html>
<head>
<title>Combos</title>
<script language="javascript">
function asignar( desde, hasta ) {
dsd = document.getElementById(desde);
if (dsd.selectedIndex != -1) {
valor = dsd.value;
txt = dsd.options[dsd.selectedIndex].text;
dsd.options[dsd.selectedIndex] = null;
if (hasta != "") {
hst = document.getElementById(hasta);
opc = new Option(txt, valor);
eval(hst.options[hst.options.length]=opc);
hst.disabled = false;
}
if (dsd.options.length == 0) dsd.disabled = true;
if (hst.options.length == 0) hst.disabled = true;
}
}
function marcarSelect( que ) {
slct = document.getElementById(que);
for ( var i = 0; i < slct.length; i++ ) {
slct.options[i].selected = true;
}
}
</script>
</head>
<body>
<form method="POST">
<table>
<tr><td>
<select id="combo1" name="combo1" size="5">
<option value="1">Trabajador 1</option>
<option value="2">Trabajador 2</option>
<option value="3">Trabajador 3</option>
<option value="4">Trabajador 4</option>
<option value="5">Trabajador 5</option>
<option value="6">Trabajador 6</option>
<option value="7">Trabajador 7</option>
<option value="8">Trabajador 8</option>
</select>
</td><td>
<input type=submit value="» »" onclick="asignar('combo1','combo2'); return false;"/>
<br/>
<input type=submit value="« «" onclick="asignar('combo2','combo1'); return false;"/>
</td><td>
<select id="combo2" name="combo2[]" multiple size="5" disabled>
</select>
</td></tr>
</table>
<br/>
<input type="submit" value="Enviar" onclick="marcarSelect('combo2');" />
</form>
</body>
</html>
Comentarios
Publicar un comentario