actualizar select al salir de otro select

AitorLopez · #1 (**permalink**) 16/10/2010, 04:56

Hola amigos. Vaya por delante que de javascript ando un poco corto, aunque estoy en ello. Necesito vuestra ayuda por lo siguiente.

Tengo dos campos select, uno carga las provincias y otro carga las localidades de una bd.

La idea es que, en función de la provincia que este seleccionada, cargue las localidades de esa provincia.

Esto lo tengo conseguido, lo que no tengo conseguido es que, si cambio la provincia, al desplegar de nuevo el select de localidades, me carga las mismas localidades de la provincia que tenia seleccionada, no de la que acabo de seleccionar. (Si cargo Madrid, me carga las localidades de madrid, pero despues eligo barcelona, me sigue cargando las localidades de madrid).

Creo que hay dos posibilidades, una sería que, al salir del campo provincia con la provincia nueva, grabara este dato en la bd y actualizara toda la pagina y al desplegar el select localidad, ya me saldrían las localidades de la provincia nueva. Esta opción la contemplo, aunque sería un poco liosa por diversos motivos.

La otra posibilidad, y aqui solicito vuestra ayuda, sería que al seleccionar la provincia nueva, todavia no esta grabado en la bd la provincia nueva seleccionada, pero que sin grabarlo, ya me carga las localidades de esta provincia nueva.

Me imagino que para hacer esto, necesitaré el valor nuevo del select provincia y actualizar de alguna forma el campo localidad pasandole ese valor nuevo del select provincia.

Resumiendo, a ver si me podeis decir como puedo coger con javascript el valor de un select (provincia) y como puedo actualizar un select (localidad) al salir de otro select (provincia).

Espero que me entendais, aunque es un poco lioso.

Gracias. Saludos.

Panino5001 · #2 (**permalink**) 16/10/2010, 05:37

Hay varias maneras de hacerlo. Te dejo un ejemplo en php (con array, pero no te será complejo generar el array con una consulta a tu base de datos) para que lo adaptes al lenguaje de servidor que uses (podés testearlo acá: http://www.disegnocentell.com.ar/new...onados_rpc.php):

Código PHP:

  <?php
if(isset($_GET['p'])){
    switch($_GET['sel']){
        case '1':
            $ret=array('Final del Juego','Rayuela','El Señor de loas Anillos');
            break;
        case '2':
            $ret=array('rock','new age');
            break;
        case '3':
            $ret=array('español','php','javascript');
            break;
        default:
            echo 'document.getElementById("pp").innerHTML="<select name=\"dos\" id=\"dos\"></select>";';
            exit;
    }
$html='<select name=\"dos\" id=\"dos\">';
foreach($ret as $v)
    $html.='<option value=\"'.$v.'\">'.$v.'</option>';
$html.='</select>';
echo 'document.getElementById("pp").innerHTML="'.$html.'";';
exit;
}
?>
<!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=iso-8859-1" />
<title>test</title>
<script>
function adjs(url){
    oldsc=document.getElementById("old_sc");
       if(oldsc)
            document.getElementsByTagName('body')[0].removeChild(oldsc);
    sc=document.createElement('script');
    sc.id="old_sc";
    sc.src=url+'&'+Math.random();
    document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
      <select name="uno" id="uno" onchange="adjs('?p&sel='+this.value)">
      <option value="0">seleccionar</option>
      <option value="1">libros</option>
    <option value="2">música</option>
    <option value="3">lenguaje</option>
  </select>
  <div id="pp"><select name="dos" id="dos">
  </select></div>
</form>
</body>
</html>

AitorLopez · #3 (**permalink**) 16/10/2010, 06:29

Hola. Muchas gracias por tu post, el ejemplo es exactamente lo que quiero.

Para adaptarlo a mi caso, veo de momento un problema, que es el siguiente.

En tu ejemplo haces un switch con 4 casos, yo tendré que hacerlo de forma dinamica, es decir, cada provincia será un caso, y dentro de cada provincia, estaran las opciones que tu has puesto en el array, que en mi caso tiene que ser las localidades.

Me imagino que es a esto a lo que referias cuando dices "pero no te será complejo generar el array con una consulta a tu base de datos".

Por otra parte, comentas que hay varias maneras de hacerlo.

Me podrías indicar alguna mas, por favor. Muchas gracias.

Panino5001 · #4 (**permalink**) 16/10/2010, 06:51

Aquí hay una versión que usa XMLHttpRequest: http://www.formatoweb.com.ar/ajax/se...pendientes.php y acá hay un tutorial sobre el mismo tema: http://www.colordeu.es/BLOG/tutorial...de-datos-mysql

AitorLopez · #5 (**permalink**) 16/10/2010, 06:55

Bueno, con toda la informacion que me has proporcionado, voy a estudiarla y ya os iré contando como voy hasta que lo consiga en este mismo hilo, aunque tardaré unos dias, por la complejida y por ser fin de semana (jeje).

Te estoy muy agradecido.

Muchas Gracias.

AitorLopez · #6 (**permalink**) 16/10/2010, 10:03

Hola. Respecto al ejemplo select dependientes, he descargado los archivos y creado la bd, pero no funciona, cuando tiene que actualizar el segundo select con el valor del primero, no funciona bien.

Por otra parte, necesito saber como se coge el valor de un select, es decir, tengo un select, elijo una opcion, ¿Como se guarda esa opcion elegida en la variable?

AitorLopez · #7 (**permalink**) 16/10/2010, 17:34

Hola. He seguido el primer ejemplo que pusiste, pero ha llegado un momento que no se como resolverlo. He llegado hasta el codigo que os pongo debajo.

Pero la parte de principio, en vez de compararlo con los arrays, quiero compararlos con una consulta a la bd para mostrar las localidades de una provincia, donde el id provincia para hacer el filtro entiendo que será la variable $_GET['sel'].

Pero esta es la parte que no se adapta, a ver si me podeis ayudar a, en vez de recorrer los arrays, hacerlo con una consulta a una bd.

Gracias.

Código PHP:

Ver originalif(isset($_GET['p'])){
    switch($_GET['sel']){
        case '1':
            $ret=array('Final del Juego','Rayuela','El Señor de loas Anillos');
            break;
        case '2':
            $ret=array('rock','new age');
            break;
        case '3':
            $ret=array('español','php','javascript');
            break;
        default:
            echo 'document.getElementById("pp").innerHTML="<select name=\"dos\" id=\"dos\"></select>";';
            exit;
    }
$html='<select name=\"dos\" id=\"dos\">';
foreach($ret as $v)
    $html.='<option value=\"'.$v.'\">'.$v.'</option>';
$html.='</select>';
echo 'document.getElementById("pp").innerHTML="'.$html.'";';
exit;
}
 
?>
<!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=iso-8859-1" />
<title>test</title>
<script>
function adjs(url){
    oldsc=document.getElementById("old_sc");
       if(oldsc)
            document.getElementsByTagName('body')[0].removeChild(oldsc);
    sc=document.createElement('script');
    sc.id="old_sc";
    sc.src=url+'&'+Math.random();
    document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
      <select name="uno" id="uno" onchange="adjs('?p&sel='+this.value)">
<?php    
            $prov1 = mysql_query(c_provincias());
            while ($prov2 = mysql_fetch_assoc($prov1))
            {
                echo '<option value='.$prov2['id_provincia'].'>'.$prov2['provincia'].'</option>';
            }
      ?>
  </select>
  <div id="pp"><select name="dos" id="dos">
  </select></div>
</form>
</body>
</html>