Rellenar Combos

thi · #1 (**permalink**) 30/05/2009, 05:10

Hola a todos,

antes de nada decir que no tengo ni idea de Ajax.
El problema que tengo es que necesito rellenar unos combos de un formulario desde una base de datos, de forma que el primero se rellene automaticamente y el segundo se rellene en función de lo que se pulsa en el primero. Pongo un ejemplo:
1º combo: Provincias españolas(Asturias, Madrid, Barcelona...etc)
2º combo: Cuando se pulse Asturias debera rellenarse con las localidades de Asturias que haya en la base de datos(Gijón, Oviedo, Aviles, Mieres...etc)

Hasta ahora los estaba rellenando con codigo mediante Arrays y funciones, pero el problema de esto es que cada vez que aparezca una nueva localidad en la base de datos(información que no rellenare yo) tendré que entrar en el codigo y meter estas nuevas localidades en los Arrays oportunos.

Tambien probe a rellenarlos mediante GET y POST haciendo consultas a la base de datos y tambien funciona pero queda poco estetico porque me recarga toda la pagina.

Y como me han dicho que con Ajax se puede hacer esto facilmente es por lo que os pido si me podeis decir como se haria paso por paso.

Un saludo.

juanpro · #2 (**permalink**) 30/05/2009, 11:51

Hola, te comportado lo que hise yo en mi caso, no obstante te recomiendo que al menos leas un poco de ajax para que tengas una idea y puedas comprender como funciona, no soy experto en ajax pero al menos el uso de manuales y un poco de practica me esta ayudando a entenderlo y hacer algunas cosillas.

Te paso a explicar, considerando que ya sabes rellenar los combos mediante base de datos te explico entonces el ajax, en mi caso uso Jquery, ya que tiene eventos, funciones para poder hacer ese tipo de peticiones asincronas al servidor.

Este codigo lo pones entre la etiqueta <head></head>

Tienes que bajarte el jquery, lo puedes hacer desde su pagina, e invocarlo de esta manera:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
// Parametros para el primer combo1
$("#combo1").change(function () {
$("#combo1 option:selected").each(function () {
//alert($(this).val());
elegido=$(this).val();
//Pasamos el parametro elegido, para comparalo con nuestra consulta y asi rellenar nuestro segundo combo
$.post("combo1.php", { elegido: elegido }, function(data){
$("#combo2").html(data);
});
});
})

});
</script>

<body>

Aca llenas tu primer combo, y recuerda que el nombre que le pones en la etiqueta name es el mismo nombre que usas en tu ajax, ejemplo:

<select name="combo1" id="combo1">

Aca tiene como nombre combo1, y ese mismo nombre lo utilizo en el ajax, igualito para el segundo combo, ya es tu eleccion si le cambias el nombre.

Seguido construyes tu segundo combo

<select name="combo2" id="combo2">
</select>

</body>

Ultimo tienes que crearte un archivos php que en mi caso le llamo combo1.php que si te fijas le doy uso en el ajax, y es ahi donde tienes que hacer la comparacion con el parametro "elegido" que mandamos mediante el ajax, de esta manera

if (isset($_POST["elegido"])){

$SQL = "SELECT * FROM restaurant WHERE idcategoria='".$_POST['elegido']."'";

El resto etiendo que ya lo sabes llenas el segundo combo, asi como lo hiciste con el primero.

Bueno espero se entienda, pruebalo y a ver que pasa

Saludos,

chalchis · #3 (**permalink**) 31/05/2009, 14:26

te puedo recomendar esto

demo:
http://www.dhtmlgoodies.com/scripts/...ed-select.html

download
http://www.dhtmlgoodies.com/index.ht...chained_select

saludos

thi · #4 (**permalink**) 02/06/2009, 10:37

Gracias por vuestras respuestas, como tengo que rellenar los combos desde la base de datos, me parece que me interesa mas lo que me dice junapro.

Pero lo estoy intentando pero no me acaba de funcionar, si me rellena el primer combo, pero claro lo estoy haciendo con una consulta directa a la base de datos, te pongo lo que estoy haciendo a ver si tu me puedes ver el fallo:

jquery.php

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>
Prueba de jQuery
</title>
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
// Parametros para el primer combo1
$("#combo_provincias").change(function () {
$("#combo_provincias option:selected").each(function () {
//alert($(this).val());
elegido=$(this).val();
//Pasamos el parametro elegido, para compararlo con nuestra consulta y asi rellenar nuestro segundo

combo
$.post("rellena_combos_localidades.php", { elegido: elegido }, function(data){
$("#combo_localidades").html(data);
});
});
})
});
</script>

</head>

<body>
<?php

$username = "root";
$password = "xxxxxxxx";
$hostname = "localhost";
$dbh = mysql_connect($hostname, $username, $password)
or die("Error accediendo al servidor de base de datos");

$selected = mysql_select_db("avyom",$dbh)
or die("Error al acceder a la base de datos");

$sql="SELECT Provincia FROM Provincias";
$res=mysql_query($sql,$dbh);
//Obtenemos el número de filas
$num=mysql_num_rows($res);

print "<select id='combo_provincias' name='combo_provincias'>";
print "<option value='0' selected='selected'>Selecciona...</option>";
for($i=0;$i<$num;$i++) {
$dato=mysql_result($res,$i,'Provincia');
echo "<option value=".$dato.">".$dato."</option>";
} print "</select>";

?>

<select name="combo_localidades" id="combo_localidades"> </select>

</body>
</html>

rellena_combos_localidades.php

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>
Prueba de jQuery
</title>
<script src="jquery.js" type="text/javascript"></script>

</head>
<body>
<?php

$username = "root";
$password = "157a3F617";
$hostname = "localhost";
$dbh = mysql_connect($hostname, $username, $password)
or die("Error accediendo al servidor de base de

datos");

$selected = mysql_select_db("avyom",$dbh)
or die("Error al acceder a la base de

datos");

if (isset($_POST["elegido"])){

$sql = "SELECT Localidad FROM Agencias WHERE

Provincia='".$_POST['elegido']."'";

$res=mysql_query($sql,$dbh);
//Obtenemos el número de filas
$num=mysql_num_rows($res);

<option value=".$_POST['elegido']."

selected='selected'>".$_POST['elegido']."</option>";

for($i=0;$i<$num;$i++) {
$dato=mysql_result($res,$i,'elegido');
echo "<option value=".$dato.">".$dato."</option>";
}
print "</select>";
}

?>
</body>
</html>