Programación Web y Scripting > JavaScript
Menu Desplegable De Paises Y Ciudades
tuxie:
:huh: Hola. hace tiempo que programo en php, pero apenas estoyaprendiendo java script y tengo un problema: sucede que me pidieron hacer un formulario de registro de usuarios de diferentes paises y se quieren incluir dos o tres menus desplegables con la informacion de pais, estado y ciudad, respectivamente. el problema es que tengo que hacer que con javascript, a la hora de elegir un pais, el menu desplegable de estado muestre los nombres de los estados de ese pais y asi sucesivamente. debido a que es mucha información, voy a guardar los nombres en una base de datos y desde ahi voy a cargarlos a la pagina del formulario, pero como hago lo de javascript? les agradezco de antemano la ayuda proporcionada.
Slimer:
Hola Tuxie:
Creo haber entendido que lo que quieres hacer lo siguiente:
Tienes dos select (o tres o los que quieras), y quieres que depende de lo que elijas en la primera opcion (Pais en tu caso), en el segundo select ponga estado, o ciudad, (o lo que quieras,,, puedes encadenarlo a tu gusto...). Un ejemplo sería el siguiente, siendo el primer Select, para el Pais, y el segundo select para la ciudad.
--- Código: Text --- <form name="f1"> <select name=pais onchange="cambia_provincia()"> <option value="0" selected>Seleccione... <option value="1">España <option value="2">Argentina <option value="3">Colombia <option value="4">Francia </select> <select name=provincia> <option value="-">- </select> </form> Hasta aqui hemos creado el primer Select
--- Código: Text --- var provincias_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...") var provincias_2=new Array("-","Salta","San Juan","San Luis","La Rioja","La Pampa","...") var provincias_3=new Array("-","Cali","Santamarta","Medellin","Cartagena","...") var provincias_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...") Con esto creamos los arrays del segundo select
--- Código: Text --- function cambia_provincia(){ var pais pais = document.f1.pais[document.f1.pais.selectedIndex].value if (pais != 0) { mis_provincias=eval("provincias_" + pais) num_provincias = mis_provincias.length document.f1.provincia.length = num_provincias for(i=0;i<num_provincias;i++){ document.f1.provincia.options[i].value=mis_provincias[i] document.f1.provincia.options[i].text=mis_provincias[i] } }else{ document.f1.provincia.length = 1 document.f1.provincia.options[0].value = "-" document.f1.provincia.options[0].text = "-" } document.f1.provincia.options[0].selected = true } Y con esto decimos que depende de lo que hayamos puesto en el primer select, tiene que aparecer en el segundo...
Esto es un ejemplo "simple" de como hacerlo. Si te das cuenta, los arrays los he introducido manualmente. Lo que tienes que hacer es una consulta a tu BD
--- Código: Text --- <?phpwhile($row = mysql_fetch_array($result)) { echo "<option value=".$row["valor"].">".$row["enunciado"]."</option>"; } ?>
Despues si no me equivoco, solo nos queda pasar la consulta de php a JavaScript
Para esto hay que "introducir" JavaScript dentro de PHP.
--- Código: Text --- <?php$javascript = "<script language=\"JavaScript\">\n";$javascript .= " var array_js = new Array();\n"; //aqui nos conectariamos a la base de datos,,, a tu gusto!!!!! Yo uso algo asi:include("conexion_bd.php");$link=Conexion(); $valores=mysql_query("select * from columna",$link) or die (mysql_error()); $contador = 0;while ($elem = mysql_fetch_array($valores)) { $javascript .="columna[".$contador."] = ".$elem['columna2'].";\n"; $contador++; }$javascript .= "</script>\n"; echo $javascript;?>
Bueno,,, creo que con esto tendrás una idea de como yo lo haria. (tambien te tengo que decir que soy amateur en esto de la programacion).
Espero que te sirva y que sea eso lo que necesites!!!! :P
Un saludo
Slimer
tuxie:
:hola: gracias por contestar, slimer. ya implemente el codigo que me enviaste en el formulario, pero me envia un error de ejecucion y no se cual es el error .Dice error de ejecucion: 'estado' no esta definido. imagino que va a ser una tonteria pero te envio el codigo para que lo revises. lo que hice fue hacer el menu pais con la consulta en mysql asi:
<select name="pais" id="pais" onChange="cambia_provincia()">
<option selected value="0">seleccione...
<?
while($result){
?>
<option value="<? echo $result[pais] ?>" ><? echo $result[pais] ?>
<?
$result=mysql_fetch_array($con);
}//while
?>
</select>
y funciona bien.El menu de estado (o provincia en tu caso) lo deje asi:
<select name="estado" id="estado" onChange="OnChange()">
<OPTION VALUE="-">-
</select>
por que se supone que la funcion de javascript generará dinamicamente el arreglo de provincias, no? bueno, entonces modifiqué tu codigo asi:
<?
$javascript = "<script language=\"JavaScript\">\n";
$javascript .= "var estado_js = new Array();\n";
//aqui me estoy conectando a la BD
$db1 = mysql_pconnect($host1,$dbuser1,$dbpws1 );
mysql_select_db($dbname1,$db1);
$con1=mysql_query("select * from estado");
$contador = 0;
while ($elem = mysql_fetch_array($con1)) {
$javascript .="estado[".$contador."] = ".$elem['estado'].";\n";
$contador++;
}
$javascript .= "</script>\n";
echo $javascript;
?>
imagino que el problema debe estar por aqui. por ultimo, la funcion de cambia_provincia, la modifique asi:
<script language="JavaScript">
function cambia_provincia(){
var pais
pais = document.alta.pais[document.alta.pais.selectedIndex].value
if (pais != 0) {
mis_provincias=eval("estado_js" +pais)
num_provincias = mis_provincias.length
document.alta.estado.length = num_provincias
for(i=0;i<num_provincias;i++){
document.alta.estado.options.value=mis_provincias
document.alta.estado.options.text=mis_provincias
}
}else{
document.alta.estado.length = 1
document.alta.estado.options[0].value = "-"
document.alta.estado.options[0].text = "-"
}
document.alta.estado.options[0].selected = true }
</script>
donde alta es el nobre del form y estado es la provincia. De nuevo te agradezco mucho por tu ayuda y espero tu respuesta. hasta luego! :)
tuxie:
Hola slimer. Ya resolvi mi problema gracias a tu ayuda. nunca habia participado en un foro y la experiencia ha sido bastante buena. espero despues poder participar un poco mas pero no sólo preguntando mis dudas. muchas gracias de nuevo y ¡a programar! :comp:
Slimer:
Hola Tuxie:
Perdona por no haberte podido ayudar antes, pero no he podido ver tu petición del mensaje antes que hoy. Lo siento.
Me alegro por otro lado el haberte podido ayudar.
Para lo que necesites (y yo sepa!!! :P )
Un saludo :hola:
Slimer
Navegación
[#] Página Siguiente
Ir a la versión completa