AYUDA!! Combobox anidados

aldg · 28 Abril 2013, 16:28 PM

Estoy intentado crear dos combobox anidados. Típico provincia, ciudad, pero no hay manera con php.

La estructura de la BD
provincia (id, nombre)
ciudad (id, id_provincia, nombre)

La cosa es que quiero que al marcar una provincia me cargue las ciudades de esa provincia sin cargar la pagina de nuevo, he visto por ahi algo de javascript y ajax, pero para hacer la consulta de mysql dentro me pierdo.

Me pueden ayudar???

EFEX · 28 Abril 2013, 17:11 PM

Lo podes buscar como chained combobox, la consulta a la db se utiliza php, js obtiene los datos pasados a json con la funcion json_decode y mostras los parametros con js.
No es necesario hacer una consulta a la db si no es necesario, mira este plugin para jquery, podes generar la estructura html con php, bueno seria solo 1 consulta a la db para obtener las ciudades y provincias a mostrar.

http://www.appelsiini.net/2010/jquery-chained-selects
http://www.appelsiini.net/projects/chained/demo.html

aldg · 28 Abril 2013, 19:30 PM

No entiendo como funciona el plugin!

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

#!drvy · 29 Abril 2013, 00:41 AM

CitarYo 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) [Seleccionar]

<?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 (php) [Seleccionar]

// 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 (html4strict) [Seleccionar]

<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 (javascript) [Seleccionar]

<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 (javascript) [Seleccionar]

$('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 (javascript) [Seleccionar]

$('#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

EFEX · 29 Abril 2013, 00:57 AM

Mejor explicado que monkey imposible, a estudiarlo

aldg · 5 Mayo 2013, 23:04 PM

Gracias a todos, estoy aprendiendo un poco e jquery. Ya más o menos he podido hacer lo que quería.

Seguire aprendiendo este lenguaje ya que veo que proporcionara mucha agilidad en una web.

Test Foro de elhacker.net SMF 2.1

AYUDA!! Combobox anidados

aldg

EFEX

aldg

#!drvy

EFEX

aldg