Selectores (o combos) anidados con JavaScript
Recientemente me vi en la situación de utilizar un <select> anidado en un formulario con datos, además, que provienen de una base de datos.
Navegando en algunos de los muchos blogs sobre programación existentes (y lamento mucho no recordar de cuál saqué la solución) encontré una manera simple para hacerlo utilizando JavaScript.
La idea es la siguiente, un módulo PHP que se ejecuta en el servidor carga los datos y devuelve un HTML al usuario. El script en el servidor incorpora a la página devuelta unos array dentro de un código JavaScript que se ejecutará en el navegador y que contiene los datos a seleccionar. En el ejemplo, trabajadores de varios departamentos.
La función realiza dos acciones: la primera, cargar un segundo <select> (trabajadores) con opciones que depederán de un primero (departamentos); la segunda, forzar la carga si se le pasa un valor de índice (probar descomentando la última línea de código, al pie del HTML.
En el ejemplo el usuario escogerá un departamento en el primer <select>, la función cargará una lista de trabajadores asociados a ese departamento y activará el segundo <select>. Cada vez que se cambia de departamento, se actualiza el segundo combo (la lista de trabajadores). A modo de prueba, cada vez que seleccione un trabajador se muestra su valor (lo que pasaría al servidor el formulario por el método POST) con un alert().
<html>
<head>
<title>Combos anidados</title>
<script type="text/javascript">
var Dep = new Array();
// para primerCombo.selectedIndex = 0
Dep[0] = new Array();
Dep[0][0] = "Trabajador 0-AAA";
Dep[0][1] = "Trabajador 0-BBB";
Dep[0][2] = "Trabajador 0-CCC";
Dep[0][3] = "Trabajador 0-DDD";
// para primerCombo.selectedIndex = 1
Dep[1] = new Array();
Dep[1][0] = "Trabajador 1-AAA";
Dep[1][1] = "Trabajador 1-BBB";
Dep[1][2] = "Trabajador 1-CCC";
Dep[1][3] = "Trabajador 1-DDD";
Dep[1][4] = "Trabajador 1-EEE";
Dep[1][5] = "Trabajador 1-FFF";
// para primerCombo.selectedIndex = 2
Dep[2] = new Array();
Dep[2][0] = "Trabajador 2-AAA";
Dep[2][1] = "Trabajador 2-BBB";
Dep[2][2] = "Trabajador 2-CCC";
function activaSegundo( formulario, activar ) {
var cual;
var valor;
var texto;
var n;
with (document.forms[formulario]) {
if (activar == null) {
cual = primerCombo[primerCombo.selectedIndex].value;
}
else {
cual = activar;
primerCombo.selectedIndex = activar;
}
segundoCombo.disabled = false;
n = segundoCombo.length;
for (var i = 0; i < n; ++i) {
segundoCombo.remove(segundoCombo.options[i]);
}
if (cual != null && cual != '') {
n = Dep[cual].length;
segundoCombo[0] = new Option('Escoja...', '');
for (var i = 0; i < n; i++) {
valor = cual + "-" + i;
texto = Dep[cual][i];
segundoCombo[segundoCombo.length] = new Option(texto, valor);
}
segundoCombo.focus();
}
else {
segundoCombo.disabled = true;
primerCombo.focus();
}
}
}
</script>
</head>
<body>
<form id="mi_formulario" name="mi_formulario" method="post" action="#">
<center>
<table width="500" height="200" border="1"><tr><td align="center" valign="middle">
Departamento:
<select name="mi_primer_combo" id="primerCombo" onchange="activaSegundo('mi_formulario');">
<option value="">Escoja...</option>
<option value="0">Contabilidad</option>
<option value="1">Ventas</option>
<option value="2">Almacén</option>
</select>
</td></tr><tr><td align="center" valign="middle">
Trabajador:
<select name="mi_segundo_campo" id="segundoCombo" disabled onchange="alert('Trabajador ID: ' + this[this.selectedIndex].value);">
</select>
</td></tr></table>
</center>
</form>
<!-- script type="text/javascript">activaSegundo('mi_formulario', 1);</script -->
</body>
</html>
Navegando en algunos de los muchos blogs sobre programación existentes (y lamento mucho no recordar de cuál saqué la solución) encontré una manera simple para hacerlo utilizando JavaScript.
La idea es la siguiente, un módulo PHP que se ejecuta en el servidor carga los datos y devuelve un HTML al usuario. El script en el servidor incorpora a la página devuelta unos array dentro de un código JavaScript que se ejecutará en el navegador y que contiene los datos a seleccionar. En el ejemplo, trabajadores de varios departamentos.
La función realiza dos acciones: la primera, cargar un segundo <select> (trabajadores) con opciones que depederán de un primero (departamentos); la segunda, forzar la carga si se le pasa un valor de índice (probar descomentando la última línea de código, al pie del HTML.
En el ejemplo el usuario escogerá un departamento en el primer <select>, la función cargará una lista de trabajadores asociados a ese departamento y activará el segundo <select>. Cada vez que se cambia de departamento, se actualiza el segundo combo (la lista de trabajadores). A modo de prueba, cada vez que seleccione un trabajador se muestra su valor (lo que pasaría al servidor el formulario por el método POST) con un alert().
<html>
<head>
<title>Combos anidados</title>
<script type="text/javascript">
var Dep = new Array();
// para primerCombo.selectedIndex = 0
Dep[0] = new Array();
Dep[0][0] = "Trabajador 0-AAA";
Dep[0][1] = "Trabajador 0-BBB";
Dep[0][2] = "Trabajador 0-CCC";
Dep[0][3] = "Trabajador 0-DDD";
// para primerCombo.selectedIndex = 1
Dep[1] = new Array();
Dep[1][0] = "Trabajador 1-AAA";
Dep[1][1] = "Trabajador 1-BBB";
Dep[1][2] = "Trabajador 1-CCC";
Dep[1][3] = "Trabajador 1-DDD";
Dep[1][4] = "Trabajador 1-EEE";
Dep[1][5] = "Trabajador 1-FFF";
// para primerCombo.selectedIndex = 2
Dep[2] = new Array();
Dep[2][0] = "Trabajador 2-AAA";
Dep[2][1] = "Trabajador 2-BBB";
Dep[2][2] = "Trabajador 2-CCC";
function activaSegundo( formulario, activar ) {
var cual;
var valor;
var texto;
var n;
with (document.forms[formulario]) {
if (activar == null) {
cual = primerCombo[primerCombo.selectedIndex].value;
}
else {
cual = activar;
primerCombo.selectedIndex = activar;
}
segundoCombo.disabled = false;
n = segundoCombo.length;
for (var i = 0; i < n; ++i) {
segundoCombo.remove(segundoCombo.options[i]);
}
if (cual != null && cual != '') {
n = Dep[cual].length;
segundoCombo[0] = new Option('Escoja...', '');
for (var i = 0; i < n; i++) {
valor = cual + "-" + i;
texto = Dep[cual][i];
segundoCombo[segundoCombo.length] = new Option(texto, valor);
}
segundoCombo.focus();
}
else {
segundoCombo.disabled = true;
primerCombo.focus();
}
}
}
</script>
</head>
<body>
<form id="mi_formulario" name="mi_formulario" method="post" action="#">
<center>
<table width="500" height="200" border="1"><tr><td align="center" valign="middle">
Departamento:
<select name="mi_primer_combo" id="primerCombo" onchange="activaSegundo('mi_formulario');">
<option value="">Escoja...</option>
<option value="0">Contabilidad</option>
<option value="1">Ventas</option>
<option value="2">Almacén</option>
</select>
</td></tr><tr><td align="center" valign="middle">
Trabajador:
<select name="mi_segundo_campo" id="segundoCombo" disabled onchange="alert('Trabajador ID: ' + this[this.selectedIndex].value);">
</select>
</td></tr></table>
</center>
</form>
<!-- script type="text/javascript">activaSegundo('mi_formulario', 1);</script -->
</body>
</html>
Comentarios
Publicar un comentario