Imprimir Página - AYUDA!! Combobox anidados

Citar

Yo de javascript se muy poco y de jquery nada. Siempre he trabajado con php...

Pos tendrás que aprender xD Al menos lo básico.. porque lo que pides (sin recargar la pagina) es imposible solo con PHP. No hace falta que hagas una consulta mysql desde javascript (aparte que es imposible xD). Lo que tienes que hacer es una comunicación entre javascript/ajax y php.

Supongamos que tenemos este php.

Código

<?php
// Conexion a bd.
$mysql = mysqli_connect('localhost','root','toor','test');
// Si nos envían provincia...
if(!empty($_GET['provincia'])){
   // Convertimos a integro.. (por si acaso)
   $provincia = (int)$_GET['provincia'];
   // Armamos consulta
   $query = 'SELECT id,id_provincia,nombre FROM cuidades WHERE id_provincia="'.$provincia.'"';
   // Si no nos envia nada, devolvemos provincias.
} else { $query = 'SELECT id,nombre FROM provincias'; }
 
$result = mysqli_query($mysql,$query);
if(!$result){die(mysqli_error());}
 
$res = array(); // strict
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
   // Guaramos el resultado en un array.
   $res[] = array($row['id'],$row['nombre']);
}
mysqli_free_result($result);
mysqli_close($mysql);
// Lo convertimos a JSON y morrimos xD
die(json_encode($res));
?>

Es relativamente sencillo.

Código

// Si le hago una consulta directa devuelve provincias en JSON
// http://localhost/consulta.php
// [["1","Palencia"],["2","Burgos"],["3","Madrid"]]
 
// Si le hago una consulta, indicando una id de provincia.. devuelve cuidades de dicha.
// http://localhost/consulta.php?provincia=3
// [["5","Madrid"],["6","Mostoles"]]
 
// Si, soy malo en geografía xD

Ahora toca javascript. Supongamos que tenemos un simple html como este:

Código

<body>
   <form action="#" method="GET">
      <select id="provincias" size="10" style="width:200px;"></select>
      <select id="cuidades" size="10" style="width:200px;"></select>
      <br />
      <input type="button" id="recargar" value="(Re)Cargar" />
   </form>
</body>

Vamos a añadirle la librería de jquery (para minimizar el codigo)..

Código

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
   // Cuando el documento este listo...
   $(function() {
      // Aqui meteremos el resto del code...
   });
</script>

Ahora vamos a hacer que cuando el usuario pulse el boton (Re)Cargar, se carguen las provincias.

Código

$('body').on('click','#recargar',function(){
   // Hacemos una consulta GET (ajax) hacia el fichero php...
   $.get('http://localhost/consulta.php',function(data){
      // Si la consulta devuelve algun resultado.. eliminamos los options previos.
      $('#provincias option, #cuidades option').remove();
      // Y llenamos el select de provincias con el resultado devuelto.
      var result = $.parseJSON(data); // Convertimos el json a array.
      // Por cada item en el array..
      for(i=0;i<result.length;i++){
         // Lo "añadimos" al select de provincias en forma de option, guardando el id como value.
         $('#provincias').append('<option value="'+result[i][0]+'">'+result[i][1]+'</option>');
      }
   });
});

Y ahora toca para cuando el usuario hace click sobre una provincia..

Código

$('#provincias').on('click','option',function(){
   // Obtenemos el value del option:
   var valor = $(this).attr('value');
   // Hacemos la consulta GET con el id.
   $.get('http://localhost/server/ehn/cuidades/consulta.php?provincia='+valor,function(data){
      // Si la consulta devuelve algun resultado.. eliminamos los options de cuidades previas.
      $('#cuidades option').remove();
      // Convertimos el json a array.
      var result = $.parseJSON(data); 
      for(i=0;i<result.length;i++){
         // Lo "añadimos" al select de cuidades en forma de option, guardando el id como value.
         $('#cuidades').append('<option value="'+result[i][0]+'">'+result[i][1]+'</option>');
      }
   });
});

Listo xD

Unos links (ingles):
jQuery -> http://jquery.com/
jQuery selectors -> http://api.jquery.com/category/selectors/
jQuery GET -> http://api.jquery.com/jQuery.get/
jQuery ParseJson -> http://api.jquery.com/jQuery.parseJSON/
jQuery append -> http://api.jquery.com/append/

Videotutorial de jQuery -> https://tutsplus.com/course/30-days-to-learn-jquery/
Tutorial de javascript -> http://www.w3schools.com/js/

Saludos

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: aldg en 28 Abril 2013, 16:28 pm