[SOLUCIONADO] Ampliar listas con JS

[julia2021]

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:

<? // 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
.

[julia2021]

Yupiiiii !, les cuento que ya lo pude solucionar, aquí les dejo la respuesta por si acaso a alguien le pueda servir.

En HTML coloque más opciones en el OnChange:

Código HTML:

<select autofocus id="id_cliente" name="id_cliente" onChange="selectChange(this, form.id_contrato, arrContratos, arrContratosId, form.id_sucursal, arrSucursales, arrSucursalesId);" class="select2_group form-control" required="required">
 <option value="">Seleccione un cliente.......

En JS me puse a armar otro select con los nuevos parametros recibidos del HTML

Código Javascript:

<? // INICIO: LISTAS DEPENDIENTES: CLIENTE >> CONTRATO ///////////////////// ?>
<? // INICIO: LISTAS DEPENDIENTES: CLIENTE >> SUCURSAL ///////////////////// ?>
<SCRIPT LANGUAGE="JavaScript">
var arrContratos    = new Array();
var arrContratosId  = new Array();
var arrSucursales   = new Array();
var arrSucursalesId = new Array();
 
<? // Armamos la lista desplegable de los CONTRATOS
foreach ($_agreements as $clave => $contrato) {
    echo 'arrContratos['.$contrato['id_contrato'].'] = "'.$contrato['nombre'].' ('.$contrato['codigo'].')'.'"';echo "\n";
    echo 'arrContratosId['.$contrato['id_contrato'].'] = '.$contrato['id_cliente'];echo "\n";
}
?>
<? // Armamos la lista desplegable de los SUCURSALES
foreach ($_offices as $clave => $sucursal) {
    echo 'arrSucursales['.$sucursal['id_sucursal'].'] = "'.$sucursal['nombre'].' ('.$sucursal['id_sucursal'].')'.'"';echo "\n";
    echo 'arrSucursalesId['.$sucursal['id_sucursal'].'] = '.$sucursal['id_cliente'];echo "\n";
}
?>
function selectChange(control, controlToPopulate, ItemArray, GroupArray, controlToPopulate2, ItemArray2, GroupArray2)
{
    // Armamos la lista de CONTRATOS
    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) ;
        }
    }
 
    // Armamos la lista de SUCURSALES
    var myEle2 ;
    var x2 ;
    // Empty the second drop down box of any choices
    for (var q2=controlToPopulate2.options.length;q2>=0;q2--) controlToPopulate2.options[q2]=null;
    // ADD Default Choice - in case there are no values
    myEle2 = document.createElement("option") ;
    myEle2.value = 0 ;
 
    if (control.name == "id_cliente") {
        myEle2.text = "Seleccione la oficina..." ;
    }
    controlToPopulate2.add(myEle2) ;
    // Now loop through the array of individual items
    // Any containing the same child id are added to
    // the second dropdown box
    for ( x2 = 0 ; x2 < ItemArray2.length  ; x2++ )
    {
        if ( GroupArray2[x2] == control.value )
        {
            myEle2 = document.createElement("option") ;
            myEle2.value = x2 ;
            myEle2.text = ItemArray2[x2] ;
            controlToPopulate2.add(myEle2) ;
        }
    }
}
//  End -->
</script>
<? // FINAL: LISTAS DEPENDIENTES: CLIENTE >> CONTRATO ///////////////////// ?>
<? // FINAL: LISTAS DEPENDIENTES: CLIENTE >> SUCURSAL ///////////////////// ?>
 

Espero les sirva a alguien. Besos a todos, Bye.