Tema: combos dependientes en php y ajax
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/06/2010, 07:57
Avatar de kahb89
kahb89
 
Fecha de Ingreso: marzo-2010
Ubicación: caracas, Venezuela
Mensajes: 57
Antigüedad: 14 años, 8 meses
Puntos: 0
combos dependientes en php y ajax
estoy realizando unos combos dependientes y para esto tome lguno eje plos de ajax los adapte mas estos no kieren mostrar ningun como cargardo en la bd y no me permite mostrar ningun select, si alguien pudiese ayudarme lo agradeceria... soy nueva en esto de ajax y no le encuentro una solucion


Código PHP:
<?php
$conexion=mysql_connect("localhost","root","123456") 
  or die("Problemas en la conexion");
$database= mysql_select_db("inv23",$conexion) or
  die("Problemas en la seleccion de la base de datos");

function generaPaises()
{

    $consulta=mysql_query("SELECT ID_MARCAS, MARCA FROM marca");

        // Voy imprimiendo el primer select 
    echo "<select name='marca' id='marca' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro=mysql_fetch_row($consulta))
    {
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
    }
    echo "</select>";
}

  
mysql_select_db($database, $conexion);
$query_equipos = "SELECT id_tipoEquipo,descripcion FROM tipo_equipo";
$equipos = mysql_query($query_equipos, $conexion) or die(mysql_error());
$row_equipo = mysql_fetch_assoc($equipos);
$totalRows_equipos= mysql_num_rows($equipos);

mysql_select_db($database, $conexion);
$query_modelo = "SELECT id_modelo,modeloeq FROM MODELO";
$modelos = mysql_query($query_modelo, $conexion) or die(mysql_error());
$row_modelos = mysql_fetch_assoc($modelos);
$totalRows_modelo = mysql_num_rows($modelos);
?>
en el codigo php llamo a los combos y estos estan en divs... este es el codigo ajax

Código Javascript: 
Ver original
  1. function nuevoAjax()
  2. { 
  3.     /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
  4.     lo que se puede copiar tal como esta aqui */
  5.     var xmlhttp=false;
  6.     try
  7.     {
  8.         // Creacion del objeto AJAX para navegadores no IE
  9.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  10.     }
  11.     catch(e)
  12.     {
  13.         try
  14.         {
  15.             // Creacion del objet AJAX para IE
  16.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  17.         }
  18.         catch(E)
  19.         {
  20.             if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
  21.         }
  22.     }
  23.     return xmlhttp; 
  24. }
  25.  
  26. // Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
  27. var listadoSelects=new Array();
  28. listadoSelects[0]="Marca";
  29. listadoSelects[1]="Modelo";
  30.  
  31. function buscarEnArray(array, dato)
  32. {
  33.     // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
  34.     var x=0;
  35.     while(array[x])
  36.     {
  37.         if(array[x]==dato) return x;
  38.         x++;
  39.     }
  40.     return null;
  41. }
  42.  
  43. function cargaContenido(idSelectMarca)
  44. {
  45.     // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
  46.     var posicionSelectModelo=buscarEnArray(listadoSelects, idSelectMarca)+1;
  47.     // Obtengo el select que el usuario modifico
  48.     var selectMarca=document.getElementById(idSelectMarca);
  49.     // Obtengo la opcion que el usuario selecciono
  50.     var opcionSeleccionada=selectMarca.options[selectMarca.selectedIndex].value;
  51.     // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
  52.     if(opcionSeleccionada==0)
  53.     {
  54.         var x=posicionSelectModelo, selectActual=null;
  55.         // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
  56.         while(listadoSelects[x])
  57.         {
  58.             selectActual=document.getElementById(listadoSelects[x]);
  59.             selectActual.length=0;
  60.             
  61.             var nuevaOpcion=document.createElement("modelo"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
  62.             selectActual.appendChild(nuevaOpcion);  selectActual.disabled=true;
  63.             x++;
  64.         }
  65.     }
  66.     // Compruebo que el select modificado no sea el ultimo de la cadena
  67.     else if(idSelectMarca!=listadoSelects[listadoSelects.length-1])
  68.     {
  69.         // Obtengo el elemento del select que debo cargar
  70.         var idSelectModelo=listadoSelects[posicionSelectModelo];
  71.         var selectModelo=document.getElementById(idSelectModelo);
  72.         // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
  73.         var ajax=nuevoAjax();
  74.         ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectModelo+"&modeloeq="+opcionSeleccionada, true);
  75.         ajax.onreadystatechange=function() 
  76.         { 
  77.             if (ajax.readyState==1)
  78.             {
  79.                 // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
  80.                 selectDestino.length=0;
  81.                 var nuevaOpcion=document.createElement("modeloeq"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
  82.                 selectModelo.appendChild(nuevaOpcion); selectModelo.disabled=true;  
  83.             }
  84.             if (ajax.readyState==4)
  85.             {
  86.                 selectModelo.parentNode.innerHTML=ajax.responseText;
  87.             } 
  88.         }
  89.         ajax.send(null);
  90.     }
  91. }


y por ultimo la pagina inter,edia q deberia cargar los combos

Código PHP:
<?php
$conexion=mysql_connect("localhost","root","123456") 
  or die("Problemas en la conexion");
$database= mysql_select_db("inv23",$conexion) or
  die("Problemas en la seleccion de la base de datos");

// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"MARCA"=>"marca",
"modeloeq"=>"modelo"
);

function validaSelect($selectModelo)
{
    // Se valida que el select enviado via GET exista
    global $listadoSelects;
    if(isset($listadoSelects[$selectModelo])) return true;
    else return false;
}

function validaOpcion($opcionSeleccionada)
{
    // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
    if(is_numeric($opcionSeleccionada)) return true;
    else return false;
}

$selectMarca=$_GET["MARCA"]; $opcionSeleccionada=$_GET["ID_MARCAS"];

if(validaSelect($selectModelo) && validaOpcion($opcionSeleccionada))
{
    $tabla=$listadoSelects[$selectMarca];
    
    mysql_select_db($database, $conexion);
    $query_modelo = "SELECT id_modelo,modeloeq FROM MODELO where marca= ".$tabla;
    $modelos = mysql_query($query_modelo, $conexion) or die(mysql_error());
    $row_modelos = mysql_fetch_assoc($modelos);
    $totalRows_modelo = mysql_num_rows($modelos);
  
    
    // Comienzo a imprimir el select
    echo "<select name='".$selectModelo."' id='".$selectModelo."' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro=mysql_fetch_row($consulta))
    {
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
        $registro[1]=htmlentities($registro[1]);
        // Imprimo las opciones del select
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
    }            
    echo "</select>";
}
?>