tercer nivel select dinamico

kiri_vfk · #1 (**permalink**) 08/03/2013, 06:37

Hola necesito ayuda con AJAX ya que acabo de empezar con ello. Tengo que crear un buscador con 3 select dinamicos. He conseguido hacer que seleccionando una opcion del primero me busque en mysql las opciones para un segundo select pero no se como hacer para un tercero y para mostrar despues la informacion.

Esto es lo que he conseguido hasta ahora:

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

Y este el codigo;

Código PHP:

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" 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>
 
</div>
</body>
</html>

destinos.php:

Código PHP:

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 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>