Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Menu de opciones actualizado segun lo que se va seleccionando

Estas en el tema de Menu de opciones actualizado segun lo que se va seleccionando en el foro de Javascript en Foros del Web. Hola, Estoy intentando realizar un formulario donde el usuario elije el pais de una lista de forma que luego se actualza otro menu con las ...
  #1 (permalink)  
Antiguo 26/02/2013, 15:37
 
Fecha de Ingreso: octubre-2011
Ubicación: Buenos Aires
Mensajes: 84
Antigüedad: 8 años
Puntos: 2
Pregunta Menu de opciones actualizado segun lo que se va seleccionando

Hola,

Estoy intentando realizar un formulario donde el usuario elije el pais de una lista de forma que luego se actualza otro menu con las opciones de provincias del pais que eligio, y por ultimo otro menu que se actualiza con las localidades de la provincia que eligio. Este 3° menu de las localidades no se como hacerlo. Les pido ayuda!!!

CODIGO AJAX:
Código PHP:
<script>
var 
xhr;
function 
ajaxpais(){
    var 
pais=document.getElementById('paises').value
    xhr
=getXHR();
    
xhr.open("GET","ajax_paises.php?paisid="+pais);
    
xhr.onreadystatechange=callback;
    
xhr.send();
}
function 
callback(){
    if(
xhr.readyState==4){
        if(
xhr.status==200){
            
document.getElementById("ciudades").innerHTML=xhr.responseText;
        }
    }
}
</script> 
Archivo Html:

Código HTML:
 <div id="box5">
                        	<select id="paises" onchange="ajaxpais();">
                            <option value="">--</option>

                          <?php
                            $query_pais = mysql_query("SELECT * FROM pais"); 
                            while($row = mysql_fetch_array($query_pais)){
                                ?>
                                <option value="<?php echo $row['id_pais'] ?>">
                                    <?php echo $row['nombre_pais'] ?>
                                </option>
                                <?php
                            }
                            ?>

                            </select>
                        </div>



                        <div id="box5">
                            <select id="ciudades">
                            </select>
                        </div>


                        <div id="box5">
                        <select id="localidad">
                        </select>
                        </div> 
archivo php:

Código PHP:
include("conexion.php");

$pais=$_REQUEST['paisid'];
$seleccionar "SELECT * FROM provincia WHERE pais='$pais'";
$resultado mysql_query($seleccionar);
                            while(
$row mysql_fetch_array($resultado))
                            {
                            echo
'<option>';echo $row['nombre_provincia'];echo'</option>';
                            } 
  #2 (permalink)  
Antiguo 26/02/2013, 17:15
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 11 años, 3 meses
Puntos: 103
Respuesta: Menu de opciones actualizado segun lo que se va seleccionando

vas por muy buen camino !
solo tenes que agregarle el evento onchange a las provincias
Código Javascript:
Ver original
  1. var xhr;
  2. function ajaxpais(){
  3.     var pais=document.getElementById('paises').value
  4.     xhr=getXHR();
  5.     xhr.open("GET","ajax_paises.php?paisid="+pais);
  6.     xhr.onreadystatechange=callback;
  7.     xhr.send();
  8. }
  9. function callback(){
  10.     if(xhr.readyState==4){
  11.         if(xhr.status==200){
  12.             document.getElementById("ciudades").innerHTML=xhr.responseText;
  13. document.getElementById("ciudades").onchange = function(){
  14. ajaxciudades();
  15. }
  16.         }
  17.     }
  18. }
  19.  
  20. function ajaxciudades(){
  21.  var ciudad=document.getElementById('ciudades').value
  22.     xhr=getXHR();
  23.     xhr.open("GET","ajax_ciudades.php?ciudadid="+ciudad);
  24.     xhr.onreadystatechange=callbackCiudad;
  25.     xhr.send();
  26.  
  27. }
  28.  
  29. function callbackCiudad(){
  30. if(xhr.readyState==4){
  31.         if(xhr.status==200){
  32.             document.getElementById("localidad").innerHTML=xhr.responseText;
  33.         }
  34.     }
  35.  
  36. }

lo que si localidades debe existir, y haces algo parecido a ajax_paises, pero con ajax_ciudades xhr.open("GET","ajax_ciudades.php?ciudadid="+ciuda d);

no se si el codigo tira errores, pero fijate lo basico de como funciona, que es que le agrege el evento onchange a "ciudades", y cree una funcion muy parecida para las ciudades a la de los paises

eso si, todo esto lo vuelvo en "localidad"

un saludo !!
  #3 (permalink)  
Antiguo 26/02/2013, 17:56
 
Fecha de Ingreso: octubre-2011
Ubicación: Buenos Aires
Mensajes: 84
Antigüedad: 8 años
Puntos: 2
Respuesta: Menu de opciones actualizado segun lo que se va seleccionando

Muchas gracias por tu ayuda, el codigo anda perfecto!
Saludos.

Etiquetas: ajax, formulario, html, opciones, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 23:04.