multiple eleccion departamentos y ciudades (ajax)

[summerblack]

Hola amigos programadores
El dia de hoy traigo un reto, a ver quien me pueda ayudar porque yo ya no se q' mas hacer jejej


Bueno el caso es el siguiente, resulta que tengo q filtrar un conjunto de personas (clientes) por cargo, por país y por departamento.

El primer filtro es por el cargo de los clientes, y los listo a cada uno de los cargos con un checkbox.. hasta ahi normal.

Pero... el segundo filtro es por departamento y ciudad, normalmente lo haria con 2 select anidados.. Pero esta vez no puedo! y debo hacerlo mediante checkbox tambien, es decir:

tengo un div en el cual listo los departamentos de la siguiente forma:

Código PHP:

<label>Departamento</label></br>
        <?php           
            echo "<div name='departamento' id='departamento' style='overflow:auto; height:20%; width:99%;'>";               
            while ($fila =mysqli_fetch_assoc($resultado3))
                {       
                      echo "<input type='checkbox' name='chkDep' id='chkDep' value='".$fila['Departamento']."'  onClick='cambiarCiudades(this.value)' >".$fila['Departamento']."<br>";
                }  
            echo "</div>";
            ?>
 

Como pueden ver cada Departamento viene junto con un checkbox que al darle click ejecuta la funcion cambiarCiudades(this.value)
esta funcion me lista las ciudades del departamento seleccionado de una manera similar en un div mas abajito de la pagina:

Código PHP:

//la variable $departamento contiene el departamento que contiene esas ciudades
echo '<input type="checkbox" name='.$departamento.' id="chkCiudad" value="'.$ciudad.'" onclick="capturarCiudades(this.name)" >'.$ciudad.'<br>';
 

mi problema es que necesito capturar varios departamentos y varias ciudades en una misma consulta es decir:
Si le doy check al Departamento1 este me lista sus ciudades y cada una tiene su checkbox para elegir, luego si le doy click en departamento2 el sistema me borra las ciudades anteriores y me lista las de este departamento2.. pero necesito capturar todas estas elecciones realizadas!!
hasta ahora lo unico que he pensado es en guardar esta informacion dentro de un input escondido (display:none) pero al darle click por segunda vez en otro departamento se me borra la informacion que tenia

capturarCiudades(this.name):

Código Javascript:

function capturarCiudades(departamento){
    var chkCiudad ='';
    var input=document.getElementById('cadena');
    input.value=departamento;
 
for (var i=0;i < document.getElementsByTagName('input').length;i++) 
{  
    checks=document.getElementsByTagName('input')[i]; 
    if (checks.type == "checkbox") 
            {  
                if (checks.checked == true && checks.id=='chkCiudad'){  
                     chkCiudad=chkCiudad+','+checks.value;   
                     chkCiudad=chkCiudad.substring(1,chkCiudad.length); 
                }       
            }
}
 
 
input.value=input.value+chkCiudad;
}
 

Espero haberme hecho entender y que me puedan dar una manito con este reto.. gracias y suerte chic@s!!

[caricatos]

Hola:

Para empezar, los atributos "id" deben ser únicos, así que si los necesitas debes hacer algo para ello.

Cuando yo tengo que hacer selecciones múltiples (o similares) empiezo con un array vacío y voy añadiendo ítems:

ciudades = Array();
if (debe_insertarse_city) ciudades.push(city);//...

Luego se inserta en el control con ciudades.join(",")...

Saludos

[summerblack]

muchisimas gracias por la respuesta caricatos la verdad no habia pensado en el join, voy a comenzar y si tengo mas dudas preguntare!!