Hola Amigos, les cuento que estoy armando dos Select Dependientes con JS, en el primero el usuario selecciona el nombre del cliente y esto hace que se cree automáticamente la segunda lista (select) con los contratos asociados a dicho cliente.
Esta parte me funciona a la perfección. Ahora bien, lo que no sé cómo hacer es que al mismo tiempo que se crea el segundo select con los contratos del cliente, también se genere al mismo tiempo otro select con las oficinas de dicho cliente.
Ojo, No estoy buscando hacer "3 select dependientes en cascada", solo quiero agregar a mis 2 select dependientes un tercero, es decir, al seleccionar un
cliente de la primera lista select, se generen 2 listas individuales con los
contratos y otra con las
oficinas respectivamente según la opción seleccionada en el primer select
Aquí les comparto las tablas involucradas, el HTML y por supuesto el JS
TABLAS>
Código:
tbl_clientes> id_cliente, nombre_cliente
1, ACME
2, SONY
3, SAMSUNG
tbl_contratos> id_contrato, id_cliente, nombre_contrato
1, 1, contrato_A
2, 1, contrato_B
3, 3, contrato-2017
4, 2, operaciones-2018
tbl_oficinas> id_oficinas, id_cliente, nombre_oficina
1, 1, 'sede principal'
2, 1, 'sucursal del centro'
3, 3, 'sede principal'
4, 2, 'oficina del centro'
5, 2, 'oficina avenida libertad'
HTML>
Ojo: Previamente se crearon los arreglos
$_agreements y
$_customers utilizados en el siguiente HTML y JS
Código HTML:
<!-- PRIMERA LISTA SELECT -->
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="id_cliente" name="id_cliente" onChange="selectChange(this, form.id_contrato, arrContratos, arrContratosId);" class="select2_group form-control" required="required">
<optgroup label="Listado de Clientes:">
<option value="">Seleccione un cliente...</option>
<?
foreach ($_customers as $clave => $cliente) { ?>
<option value="<?php echo $cliente['id_cliente'];?>"> <?php echo $cliente['nombre_cliente'];?></option>
<? } ?>
</optgroup>
</select>
</div>
<!-- SEGUNDA LISTA SELECT -->
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="id_contrato" name="id_contrato" class="select2_group form-control" required="required">
</select>
</div> JAVASCRIPT>
Código Javascript
:
Ver original<? // INICIO: LISTAS DEPENDIENTES: CLIENTE >> CONTRATO ///////////////////// ?>
<SCRIPT LANGUAGE="JavaScript">
var arrContratos = new Array();
var arrContratosId = new Array();
<? // Armamos la lista desplegable de los CONTRATOS
foreach ($_agreements as $clave => $contrato) {
echo 'arrContratos['.$contrato['id_contrato'].'] = "'.$contrato['nombre_contrato'].'"';echo "\n";
echo 'arrContratosId['.$contrato['id_contrato'].'] = '.$contrato['id_cliente'];echo "\n";
}
?>
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
if (control.name == "id_cliente") {
myEle.text = "Seleccione el contrato..." ;
}
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
<? // FINAL: LISTAS DEPENDIENTES: CLIENTE >> CONTRATO ///////////////////// ?>
Sé que debe ser algo sencillo, pero no soy muy buena en JS, espero me puedan apoyar
.