Cargar las ciudades para un país seleccionado (jquery)
(1/1)
[GB]:
Buenas, estoy intentando hacer un script con la herramienta jquery para una web que consiste de 2 option select; uno de ellos para seleccionar el país que el usuario quiere elegir y en el otro select se cargaran las ciudades para el país que eligió el usuario en el select anterior, mas o menos lo tengo y acá va:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paises</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
x= $(document);
x.ready(inicializarControles);
var aCiudades = new Array();
function inicializarControles(){
y=$("#ciudades");
x=$("#paises");
x.click(cargarCiudades);
}
function cargarCiudades() {
if (x.value=="UY") {
aCiudades.clear();
aCiudades[0] = "Montevideo";
aCiudades[1] = "Canelones";
aCiudades[3] = "San Jose";
for(var i=0; i< aCiudades.length; i++) {
y.append(aCiudades[i]);
}
}
if (x=="AR") {
aCiudades.clear();
aCiudades[0] = "Buenos Aires";
aCiudades[1] = "La Plata";
aCiudades[3] = "Rosario";
for(var i=0; i< aCiudades.length; i++) {
y.append(aCiudades[i]);
}
}
}
</script>
</head>
<body>
<select name="paises" id="paises">
<OPTION VALUE="UY">Uruguay</OPTION>
<OPTION VALUE="AR">Argentina</OPTION>
<OPTION VALUE="BR">Brasil</OPTION>
</select>
<br>
<select name="ciudades" id="ciudades">
</select>
</body>
</html>
Jquery: http://code.jquery.com/jquery-1.4.2.js
Y bueno el problema esta en la funcion cargarCiudades() mas precisamente en el for donde recorro las ciudades cargadas en el array , intente hacer un append.. pero no tengo idea de como hacer para que aparezcan en su correspondiente select ciudades... alguna idea? thanks!
Nakp:
puede ser .append() o .html()
Código
y.append('<option value="' + aCiudades[i] + '">' + aCiudades[i] + '</option>');
[GB]:
Cita de: Nakp en 22 Mayo 2010, 23:22 pm
puede ser .append() o .html()
Código
y.append('<option value="' + aCiudades[i] + '">' + aCiudades[i] + '</option>');
Gracias! era justo lo que precisaba ahora si funciona bien y entiendo mas o menos como es la mano con esto! y value estaba mal en el if... era con val() e "==" no "="
Dejo a continuación el código corregido y funcionando, por si a alguien por esas casualidades le sirve de algo...
Saludos!
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paises</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
x= $(document);
x.ready(inicializarControles);
function inicializarControles(){
y=$("#ciudades");
z=$("#paises");
z.change(cargarCiudades);
}
function cargarCiudades() {
y.children().remove();
if (z.val()=="UY") {
var aCiudades = new Array();
aCiudades[0] = "Montevideo";
aCiudades[1] = "Canelones";
aCiudades[2] = "San Jose";
for(var i=0; i< aCiudades.length; i++) {
y.append('<option value="' + aCiudades[i] + '">' + aCiudades[i] + '</option>');
}
}
if (z.val()=="AR") {
var aCiudades = new Array();
aCiudades[0] = "Buenos Aires";
aCiudades[1] = "La Plata";
aCiudades[2] = "Rosario";
for(var i=0; i< aCiudades.length; i++) {
y.append('<option value="' + aCiudades[i] + '">' + aCiudades[i] + '</option>');
}
}
}
</script>
</head>
<body>
<select name="paises" id="paises">
<OPTION selected></OPTION>
<OPTION VALUE="UY">Uruguay</OPTION>
<OPTION VALUE="AR">Argentina</OPTION>
<OPTION VALUE="BR">Brasil</OPTION>
</select>
<br>
<select name="ciudades" id="ciudades">
</select>
</body>
</html>
Navegación