Autor Tema: Menu Desplegable De Paises Y Ciudades (Leído 8590 veces)

tuxie · « **en:** Miércoles 30 de Junio de 2004, 18:29 »

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

 
&#60;form name=&#34;f1&#34;&#62; 
&#60;select name=pais onchange=&#34;cambia_provincia()&#34;&#62; 
&#60;option value=&#34;0&#34; selected&#62;Seleccione... 
&#60;option value=&#34;1&#34;&#62;España 
&#60;option value=&#34;2&#34;&#62;Argentina 
&#60;option value=&#34;3&#34;&#62;Colombia 
&#60;option value=&#34;4&#34;&#62;Francia 
&#60;/select&#62; 
 
&#60;select name=provincia&#62; 
&#60;option value=&#34;-&#34;&#62;- 
&#60;/select&#62; 
&#60;/form&#62; 
 
 

Hasta aqui hemos creado el primer Select

Código: Text

 
var provincias_1=new Array(&#34;-&#34;,&#34;Andalucía&#34;,&#34;Asturias&#34;,&#34;Baleares&#34;,&#34;Canarias&#34;,&#34;Castilla y León&#34;,&#34;Castilla-La Mancha&#34;,&#34;...&#34;) 
var provincias_2=new Array(&#34;-&#34;,&#34;Salta&#34;,&#34;San Juan&#34;,&#34;San Luis&#34;,&#34;La Rioja&#34;,&#34;La Pampa&#34;,&#34;...&#34;) 
var provincias_3=new Array(&#34;-&#34;,&#34;Cali&#34;,&#34;Santamarta&#34;,&#34;Medellin&#34;,&#34;Cartagena&#34;,&#34;...&#34;) 
var provincias_4=new Array(&#34;-&#34;,&#34;Aisne&#34;,&#34;Creuse&#34;,&#34;Dordogne&#34;,&#34;Essonne&#34;,&#34;Gironde &#34;,&#34;...&#34;)

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(&#34;provincias_&#34; + pais) 
       num_provincias = mis_provincias.length 
       document.f1.provincia.length = num_provincias 
        for(i=0;i&#60;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 = &#34;-&#34; 
       document.f1.provincia.options[0].text = &#34;-&#34; 
    } 
    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

 
&#60;?php
while(&#036;row = mysql_fetch_array(&#036;result)) { 
echo &#34;&#60;option value=&#34;.&#036;row[&#34;valor&#34;].&#34;&#62;&#34;.&#036;row[&#34;enunciado&#34;].&#34;&#60;/option&#62;&#34;; } 
?&#62;

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

 
&#60;?php
&#036;javascript = &#34;&#60;script language=&#092;&#34;JavaScript&#092;&#34;&#62;&#092;n&#34;;
&#036;javascript .= &#34;   var array_js = new Array();&#092;n&#34;; 
//aqui nos conectariamos a la base de datos,,, a tu gusto!!!!! Yo uso algo asi:
include(&#34;conexion_bd.php&#34;);
&#036;link=Conexion(); 
&#036;valores=mysql_query(&#34;select * from columna&#34;,&#036;link) or die (mysql_error());
 
&#036;contador = 0;
while (&#036;elem = mysql_fetch_array(&#036;valores)) {
  &#036;javascript .=&#34;columna[&#34;.&#036;contador.&#34;] = &#34;.&#036;elem['columna2'].&#34;;&#092;n&#34;;   
  &#036;contador++;                                  }
&#036;javascript .= &#34;&#60;/script&#62;&#092;n&#34;; 
echo &#036;javascript;
?&#62;
 
 

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!!!!

Un saludo

Slimer

tuxie · « **Respuesta #2 en:** Martes 6 de Julio de 2004, 18:21 »

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 · « **Respuesta #3 en:** Jueves 8 de Julio de 2004, 19:42 »

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!

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!!!

)

Un saludo

Slimer

tuxie

hola otra vez.

tengo un nuevo problema con lo de los menus. tengo los siguientes menus en mi form:

<td><select name="pais" id="pais" onChange="OnChange()">
<option selected value="0">seleccione...
<?
while($result){
?>
<option value="<? echo $result[id_pais]; ?>" ><? echo $result[pais]; ?>
<?
    $result=mysql_fetch_array($con);
       }//while
?></option>
       </select> </td>

</tr>

<tr>

<td>Estado</td>

<td><select name="estado" id="estado" onChange="CambiaCiudad()">
    <option value="-">-

       </select></td>

</tr>

<tr>

<td>Ciudad</td>

<td>
<select name="ciudad">
<option value="-" selected>-</option>

</select></td>

Y esta es la funcion del menu "PAIS":

<script language="JavaScript" >

function OnChange(){
sel_type_index = document.alta.pais.selectedIndex;

sel_type_value = document.alta.pais[sel_type_index].value;
for(a = document.alta.estado.length - 1; a > 0; a--)

   document.alta.estado.options[a]   = null;

   <?
   cerrar();
   $db2 = mysql_pconnect($host1,$dbuser1,$dbpws1 );
   mysql_select_db($dbname1,$db2);
   $es1=mysql_query("select id_estado from estado");
   $es=mysql_num_rows($es1);
   for ($n=1;$n<=$es;$n++){
    $estado=mysql_query("select * from estado where id_pais='$n'");
    echo "if(sel_type_value==\"".$n."\"){\n";
       $a=1;
   while($estado1=mysql_fetch_row($estado)){
          echo "document.alta.estado.options[$a]= new Option(\"$estado1[2]\",\"$estado1[3]\");\n";
$a++;
}
echo "}\n";
}
?>

return true;

}

</script>

Y la del menu ESTADO:

<script language="JavaScript">

function CambiaCiudad(){

sel_type_index = document.alta.estado.selectedIndex;

sel_type_value = document.alta.estado[sel_type_index].value;

for(i = document.alta.ciudad.length - 1; i > 0; i--)

   document.alta.ciudad.options   = null;

<?
cerrar();
$db1 = mysql_pconnect($host1,$dbuser1,$dbpws1 );
mysql_select_db($dbname1,$db1);
$il1=mysql_query("select valor from ciudad");

// 'valor' es una cadena de 3 caracteres para diferenciar al estado o provincia.
//ejemplo:Jalisco=JAL, Baja California Sur = BCS, etc.

$ciu=mysql_fetch_row($il1);
//for ($ti=1;$ti<=$il;$ti++){
while($ciu!=""){
$ciudad=mysql_query("select * from ciudad where valor='$ciu[3]'");
echo "select * from ciudad where valor='$ciu[3]'\n";
echo "if(sel_type_value==\"".$ciu[3]."\"){\n";
$o=1;
while($ciudad1=mysql_fetch_row($ciudad)){
echo "document.alta.ciudad.options[$o]= new Option(\"$ciudad1[2]\");\n";
   $o++;
   }
   echo "}\n";
}
?>


      return true;

      }

</script>

Tengo que manejar forzosamente la cadena de valor en lugar del id de la tabla, pero al cargar la pagina entra a un ciclo infinito y al detener la carga examino el codigo fuente y me da lo que sigue:

function OnChange(){

      //alert(estado);

sel_type_index = document.alta.pais.selectedIndex;

      sel_type_value = document.alta.pais[sel_type_index].value;
      //alert (sel_type_value);
      for(a = document.alta.estado.length - 1; a > 0; a--)

         document.alta.estado.options[a]   = null;

      if(sel_type_value=="1"){
document.alta.estado.options[1]= new Option("Jalisco","JAL");
document.alta.estado.options[2]= new Option("Chihuahua","CHU");
document.alta.estado.options[3]= new Option("Aguascalientes","AGU");
document.alta.estado.options[4]= new Option("Baja Calif. Nte","BCN");
document.alta.estado.options[5]= new Option("Baja Calif. Sur","BCS");
document.alta.estado.options[6]= new Option("Campeche","CAM");
document.alta.estado.options[7]= new Option("Chiapas","CPS");
document.alta.estado.options[8]= new Option("Coahuila","COA");
document.alta.estado.options[9]= new Option("Colima","COL");
document.alta.estado.options[10]= new Option("D.F.","DFE");
document.alta.estado.options[11]= new Option("Durango","DGO");
document.alta.estado.options[12]= new Option("Edo. de Mexico","EDM");
document.alta.estado.options[13]= new Option("Guanajuato","GTO");
document.alta.estado.options[14]= new Option("Guerrero","GRO");
document.alta.estado.options[15]= new Option("Hidalgo","HDG");
document.alta.estado.options[16]= new Option("Michoacan","MCH");
document.alta.estado.options[17]= new Option("Morelos","MOR");
document.alta.estado.options[18]= new Option("Nayarit","NAY");
document.alta.estado.options[19]= new Option("Nuevo León","NLN");
document.alta.estado.options[20]= new Option("Oaxaca","OXA");
document.alta.estado.options[21]= new Option("Puebla","PBL");
document.alta.estado.options[22]= new Option("Queretaro","QRT");
document.alta.estado.options[23]= new Option("Quintana Roo","QRO");
document.alta.estado.options[24]= new Option("San Luís Potosí","SLP");
document.alta.estado.options[25]= new Option("Sinaloa","SNL");
document.alta.estado.options[26]= new Option("Sonora","SON");
document.alta.estado.options[27]= new Option("Tabasco","TAB");
document.alta.estado.options[28]= new Option("Tamaulipas","TAM");
document.alta.estado.options[29]= new Option("Tlaxcala","TLX");
document.alta.estado.options[30]= new Option("Veracruz","VER");
document.alta.estado.options[31]= new Option("Yucatán","YUC");
document.alta.estado.options[32]= new Option("Zacatecas","ZAC");
}
if(sel_type_value=="2"){
document.alta.estado.options[1]= new Option("California","");
}
if(sel_type_value=="3"){
}
if(sel_type_value=="4"){
}
if(sel_type_value=="5"){
}
if(sel_type_value=="6"){
}
if(sel_type_value=="7"){
}
if(sel_type_value=="8"){
}
if(sel_type_value=="9"){
}
if(sel_type_value=="10"){
}
if(sel_type_value=="11"){
}
if(sel_type_value=="12"){
}
if(sel_type_value=="13"){
}
if(sel_type_value=="14"){
}
if(sel_type_value=="15"){
}
if(sel_type_value=="16"){
}
if(sel_type_value=="17"){
}
if(sel_type_value=="18"){
}
if(sel_type_value=="19"){
}
if(sel_type_value=="20"){
}
if(sel_type_value=="21"){
}
if(sel_type_value=="22"){
}
if(sel_type_value=="23"){
}
if(sel_type_value=="24"){
}
if(sel_type_value=="25"){
}
if(sel_type_value=="26"){
}
if(sel_type_value=="27"){
}
if(sel_type_value=="28"){
}
if(sel_type_value=="29"){
}
if(sel_type_value=="30"){
}
if(sel_type_value=="31"){
}
if(sel_type_value=="32"){
}
if(sel_type_value=="33"){
}


      return true;

      }


      function CambiaCiudad(){

      //alert(estado);

sel_type_index = document.alta.estado.selectedIndex;

      sel_type_value = document.alta.estado[sel_type_index].value;
// alert (sel_type_value);

      for(i = document.alta.ciudad.length - 1; i > 0; i--)

         document.alta.ciudad.options   = null;

      select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
select * from ciudad where valor=''
if(sel_type_value==""){
}
............
y asi sucesivamente. La funcion OnChange() parece que si funciona bien, pero la de cambiaciudad() no me toma ningun valor. les agradeceria mucho si me ayudaran. hasta luego.

Slimer · « **Respuesta #6 en:** Lunes 19 de Julio de 2004, 03:39 »

Hola Tuxie:

Lo primero comentarte que me pierdo un poco en tu codigo, y no veo algunos detalles, como,,,

select * from estado where id_pais='$n'"

donde defines la variable $n?
En otro sitio donde me pierdo es que no conozco la estructura de las tablas

Lo que parece estar claro, es que la "clave" de tu problema esta en la selección del estado, y que es en esa interrogación a la BD donde tienes problemas.

select * from estado where id_pais LIKE $n

Esta supongo recibirá el valor "valor" del pais que has elegido en el select.

Y despues, cuando hagas esa consulta (que no entiendo porque no te lo filtra correctamente)... simplemente tienes que mostrarlo con algo similar a esto...

<select name="estado"onChange="ciudad()">
<option value="" selected>
<?

while($row = mysql_fetch_array($consultaBD)) {
echo "<option value=".$row["valor_estado"].">".$row["estado"]."</option>";
}
?>
</select>

Espero haberte ayudado aunque sea con alguna "luz", pero es que no "veo" el codigo (me faltan cosas).... Podrías adjuntar los archivos???

Un saludo

Slimer

Slimer · « **Respuesta #7 en:** Lunes 19 de Julio de 2004, 03:43 »

Hola Tuxie:

He encontrado este enlace que a lo mejor te puede ayudar:

http://www.desarrolloweb.com/articulos/1281.php

Espero que te ayude... y sino,,, ya sabes que lo que este en nuestra mano...

Un saludo

Slimer

tuxie

Hola. Muchas gracias. en realidad mi problema era una verdadera tontería, estaba mandando el valor de $n como vacío por que era una variable a la q

tuxie

Hola otra vez. el problema es que estaba asignando a $n el valor de un arreglo y no estaba designando que numero del registro queria mostrar

. una disculpa por la tonteria, pero crei que el problema estaba en javascript por que aun soy bastante inexperta. ya revise el url que me enviaste y me ha sido de mucha utilidad. de nuevo gracias y hasta luego

.

Slimer

Hola Tuxie:

Me alegro de haberte podido ayudar y que tu problema ya este resuelto.

Ya sabes que si necesitas algo,,, estamos por aqui.....

Un abrazo

Slimer

cesarvrc19

Hola, quisiera que me ayude. le explico lo que deceo hacer en access 2007
Tengo los siguientes campos Pais, Provincia, Distrito, Corregimiento, y comunidad. Lo que deceo hacer es que cuando me coloco en la columna o campo distrito me despliege los distritos segun la provincia que elegi en el campo anterior, de igual forma cuando valla a corregimiento me despliege los corregimientos que pertenecen a distrito escogido en el campo anterior y asi sucecivamente. Esto lo deceo hacer en Access 2007 me puedes decir como hacerlo. te lo agradezco.

SoloCodigo