Select dinamicos

kiri_vfk · #1 (**permalink**) 11/03/2013, 07:45

Necesito ayuda con Javascript, ajax, jquery o como sea que pueda hacerse. Tengo que crear un buscador con 3 select dinamicos. Es decir que según el valor introducido en el primero, busque los option del segundo en un base de datos mysql. Lo mismo para el tercero.
Lo he intentado de muchas formas pero no consigo que me funcione el tercer select. Por mas que busco en internet no doy con la solución. Necesito ayuda.

Ademas de esto quiero que según vayan pinchando en los select me vaya apareciendo información debajo del buscador.

maycolalvarez · #2 (**permalink**) 11/03/2013, 13:47

¿y el código?, ¿enlaces para verlo?: me temo que con 0 información es realmente imposible ayudarle.

Use el highlight para mostrar código

0123 · #3 (**permalink**) 12/03/2013, 00:32

Buenas kiri_vfk,

Como pareces no tener problemas con jquery. Te paso un link de tres combos dependientes realizado en jquery, puedes ver un ejemplo aqui:

http://www.miguelmanchego.com/wp-content/demos/jquery/combos-dependientes/

Y pare descargarlo:

http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/

Dejale un comentario a Miguel.

Un saludo!

kiri_vfk · #4 (**permalink**) 12/03/2013, 03:31

Bueno aqui os dejo en link de lo que tengo:

http://www.goodfly.es/buscador/ajax.php

Y aqui el codigo:

Código HTML:

Ver original<!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">
<title>Buscador ajax</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script>
function ver_destinos(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","destinos.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="selector" style="background-color: rgb(166, 245, 135); height:60px; border-radius:10px; padding:10px; border: 1px solid darkseagreen;">
    <div id="contenido" style="float: left; font-size: 18px; font-family: 'Times New Roman', Times, serif;">   
         <?php
         require("conexion.php");
            mysql_query("SET NAMES 'utf8'");
            if (!$conexion)
              {
              die('Could not connect: ' . mysql_error());
              }
            $sql="SELECT *  FROM vuelos";
            $result = mysql_query($sql);
            echo "<form>";
            echo '<label>Seleccione su lugar de origen</label>';
            echo '<select style="margin-left:15px" name="origenes" id="origenes" onchange="ver_destinos(this.value)">';
            echo '<option value="">Selecciona un origen</option>';
            while($row = mysql_fetch_array($result))
                {
                echo "<option value=". $row['id'] .">". $row['nombre_origen'] ."</option>";
                }
             echo '</select>';
             mysql_close($conexion);
         echo '</form>';
         echo '<br>';
         ?>
    </div>  <!--Ciero div contenido-->
    <div id="contenido2" style="float: left; font-size: 18px; font-family: 'Times New Roman', Times, serif;">  
        <div style="margin-left:30px" id="txtHint"></div>
    </div>
</div>  <!--Cierro el bloque selector -->
<div id="miDiv" style="clear:left; padding:10px">Seleccione algun valor</div>
</body>
</html>

Y aqui el codigo de la pagina que llamo con ajax:

Código HTML:

Ver original<!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=utf-8" />
<title>Documento sin título</title>
 
</head>
<body>
<?php
$q=$_GET["q"];
require("conexion.php");
mysql_query("SET NAMES 'utf8'");
if (!$conexion)
  {
  die('Could not connect: ' . mysql_error());
  }
$sql="SELECT DISTINCT id_destinos FROM hoteles_destinos WHERE id_origen = '".$q."'";    //busco los id de los destinos posibles
$result = mysql_query($sql);
echo '<label>Seleccione su destino</label>';
echo '<select name="combo" id="combo" onchange="cargar(this.options[this.selectedIndex].value)" style="margin-left:15px" name="destinos" id="destinos">';
echo '<option value="">Elige</option>';
while($row = mysql_fetch_array($result))
  {
      $sql2 = "SELECT nombre_origen FROM vuelos WHERE id = '".$row['id_destinos']."'";  //a partir de los id busco en la tabla de destinos el nombre
      $result2 = mysql_query($sql2);
      while($row2 = mysql_fetch_array($result2))    
        {
            echo "<option value=". $row2['id'] .">". $row2['nombre_origen'] ."</option>";   //muestro los destinos posibles para ese origen
        }
  }
echo "</select>";
mysql_close($conexion);
?>
 
</body>
</html>

Ahora lo que no he conseguido hacer es que el segundo select me cree un tercero con las fechas disponibles; lo he intentado de todas las formas que se me han ocurrido, pero nada. Ademas de esto quiero que segun vaya selecionando cada select me ponga debajo del buscador un bloque con la info de los hoteles que encuentre con ese origen, ese destino y en la fecha selecionada.