Select de 3 niveles

[andresenrique]

Buenos días, soy nuevo en el foro.

El motivo de la creación de este thread es que estoy intentado extender un script que encontré aquí [0], para hacer el select de 3 niveles (país, estado, ciudad), sin necesidad de usar AJAX, pero de alguna manera cuando lo extiendo deja de funcionar correctamente, y realmente no he podido encontrar el error.

Código:

<script language="javascript">
function agregarOpciones(form)
{
var selec = form.pais.options;
var estado = form.estado.options;
var ciudad = form.ciudad.options;
combo.length = null;
combos.length = null; 

    if (selec[0].selected == true)
    {
        var seleccionar = new Option("<-- esperando selección","","","");
        combo[0] = seleccionar;
    }

    if (selec[1].selected == true)
    {
        var estado1 = new Option("Aragua","aragua","","");
        var estado2 = new Option("Carabobo","Carabobo","","");
        combo[0] = estado1;
        combo[1] = estado2;

        if (combo[0].selected == true)
        {
            var seleccionar = new Option("<-- esperando selección","","","");
            combos[0] = seleccionar;
        }

        if (combo[1].selected == true)
        {
            var ciudad1 = new Option("Cagua","Cagua","","");
            var ciudad2 = new Option("Maracay","Maracay","","");
            combos[0] = ciudad1;
            combos[1] = ciudad2;
        }
    
        if (combo[2].selected == true)
        {
            var ciudad1 = new Option("Valencia","Valencia","","");
            var ciudad2 = new Option("Naguanagua","Naguanagua","","");
            combos[0] = ciudad1;
            combos[1] = ciudad2;
        }

    }
}
</script>

<form name="ejemplo2" method="POST" target="_blank" action="pagina.htm">

<select name="pais" onChange="agregarOpciones(this.form)">

<option value="">[seleccione una opción]</option>

<option value="musicapopular">Venezuela</option>


</select>

 

<select name="estado">

<option value=""><-- esperando selección</option>

</select>

<select name="ciudad">

<option value=""><-- esperando selección</option>

</select>
 

<input type="submit" value="Enviar"></form>

[0] desarrolloweb.com/articulos/1490.php

[ceSharp]

Hola andresenrique,

He estado revisando este código y, retocándolo un poco, me ha funcionado. Es sólo una idea de cómo podrías hacerlo, posiblemente haya otras muchas formas de hacerlo mas sencillo porque estamos cargando 'a pelo' todas los estados y ciudades. En un ejemplo como este es sencillo ya que solo cargamos 3 estados y 3 ciudades por estado, pero seguro que se puede mejorar usando bucles o llamando a otras funciones para cargar países, estados y ciudades. Por cierto, he 'españolizado' el ejemplo, que si no no me enteraba! (ahora son paises, regiones y ciudades). Este sería el código javascript:

<script type="text/javascript">
function agregarOpciones(form)
{debugger;
var pais = form.pais.options;
var region = form.region.options;
var ciudad = form.ciudad.options;
var indiceRegion = region.selectedIndex;
region.length = null;
ciudad.length = null;

if(pais.selectedIndex == 0)
{
var regionesVacias = new Option("<-- esperando selección");
var ciudadesVacias = new Option("<-- esperando selección");
region[0] = regionesVacias;
ciudad[0] = ciudadesVacias;

}
if(pais.selectedIndex == 1)
{
var cargaRegiones1 = new Option("C. Mancha");
var cargaRegiones2 = new Option("Catalunya");
var cargaRegiones3 = new Option("C. Valenciana");
region[0] = new Option("<-- seleccione región");
region[1] = cargaRegiones1;
region[2] = cargaRegiones2;
region[3] = cargaRegiones3;
if(indiceRegion == 0)
{
var ciudadesVacias = new Option("<-- esperando selección");
ciudad[0] = ciudadesVacias;
}
if(indiceRegion == 1)
{
var cargaCiudades1 = new Option("Toledo");
var cargaCiudades2 = new Option("C. Real");
var cargaCiudades3 = new Option("Albacete");
ciudad[0] = new Option("<-- seleccione ciudad");
ciudad[1] = cargaCiudades1;
ciudad[2] = cargaCiudades2;
ciudad[3] = cargaCiudades3;
region.selectedIndex = 1;
}
if(indiceRegion == 2)
{
var cargaCiudades1 = new Option("Barcelona");
var cargaCiudades2 = new Option("Tarragona");
var cargaCiudades3 = new Option("Lleida");
ciudad[0] = new Option("<-- seleccione ciudad");
ciudad[1] = cargaCiudades1;
ciudad[2] = cargaCiudades2;
ciudad[3] = cargaCiudades3;
region.selectedIndex = 2;
}
if(indiceRegion == 3)
{
var cargaCiudades1 = new Option("Alicante");
var cargaCiudades2 = new Option("Castellón");
var cargaCiudades3 = new Option("Valencia");
ciudad[0] = new Option("<-- seleccione ciudad");
ciudad[1] = cargaCiudades1;
ciudad[2] = cargaCiudades2;
ciudad[3] = cargaCiudades3;
region.selectedIndex = 3;
}
}
}

</script>

...y este el del form:

<form name="ejemplo2" id="ejemplo2" method="POST" target="_blank" action="pagina.htm">

<select name="pais" id="pais" onChange="agregarOpciones(this.form)">

<option value="0">[seleccione una opción]</option>

<option value="1">España</option>


</select>



<select name="region" id="region" onchange="agregarOpciones(this.form)">

<option value="0"><-- esperando selección</option>

</select>

<select name="ciudad" id="ciudad">

<option value="0"><-- esperando selección</option>

</select>


<input type="submit" value="Enviar"></form>


Insisto en que se puede mejorar y no dudo que cualquiera de los grandes colaboradores de este foro lo harán mejor que yo, pero en este ejemplo vas a poder ver fácilmente como se cargan y descargan los combos (o selects, como quieras llamarlos...)

Salu2

[eulerss]

excelente aporte ceSharp, la pregunta es, porque hacerlo sin usar ajax? lo que pense fue que era como aprendizaje, de todas formas, siempre es bueno tener alguna otra manera o camino para resolver un poblema

saludos

[andresenrique]

Gracias, la voy a probar :)