Combos dinamicos (sin array)

danielcornejo27 · #1 04-01-2008

Hola, lo que yo estoy usando es APACHE, PHP y MySQL, si tenes algo de codigo para esto seria espectacular. Saludos

*Emilio* · #2 04-01-2008

Cita:

Empezado por danielcornejo27

Hola, lo que yo estoy usando es APACHE, PHP y MySQL, si tenes algo de codigo para esto seria espectacular. Saludos

Bueno como te comento en mi anterior respuesta la parte cliente puedes verla tu mismo, no obstante te explico un poco como va el asunto...

inicialmente creas tu form con el primer selector, puedes hacerlo a estático o también dinámico, eso no cambia mucho, pensemos que el primero es estático, por tanto tenemos un form similar a esto...

Código PHP:


			
<form name="form">
      <select id="select_categorias" name="categorias" onChange="buscaSubcategorias(this.value, 'span_subcategorias', 'select_subcategorias', true)" class="select">
                <option value='0' selected>Selecciona una categoria</option>
        <option value='1' >Bases de datos</option>
        <option value='2' >Entornos de desarrollo</option>
        <option value='3' >Web</option>
                <option value='6' >Delphi</option>
        <option value='7' >Herramientas</option>
        <option value='8' >Software</option>
    </select>

<span id="span_subcategorias">&nbsp;</span>&nbsp;
</form>

function buscaSubcategorias( categoria, span, id, evento ) {
      if (( categoria == 0 ) && ( id =='select_subcategorias' )) {
         objeto( 'span_subcategorias' ).style.visibility ='hidden';
         objeto( 'span_enlaces' ).innerHTML='';
         return;
      }
      else {
         objeto( 'span_subcategorias' ).style.visibility ='visible';
      }
      objeto( 'span_inserta_un_enlace' ).style.visibility='hidden';
      solicitando( span );
      ajax = nuevoAjax();
      ajax.open('POST', 'respuesta-subcategorias.php', true );
      ajax.onreadystatechange = function() {
         if ( ajax.readyState == 4 ) {
               objeto( span ).innerHTML = ajax.responseText;
         }
      }
      ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      if ( evento ) { evento='SI'; }
      ajax.send( 'categoria=' + categoria + '&span='+span + '&id='+id + '&evento='+evento );
   }

// Para no repetir insaciablemente document.getElementById
   function objeto( id ) {
      return document.getElementById( id );
   }


   // Constructor de objetos Ajax
   function nuevoAjax(){
      var xmlhttp=false;
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (E) {
            xmlhttp = false;
         }
      }
      if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
         xmlhttp = new XMLHttpRequest();
      }
   return xmlhttp;
   }

Y en la parte del servidor como ya te dije unicamente hacemos la consulta y devolvemos el resultado.

Código PHP:


			
      $categoria  = $_POST["categoria"];
      $id         = $_POST["id"];
      $evento     = $_POST["evento"];

      if ( $evento =='SI' ) {
         $evento = 'onChange="buscaEnlaces(this.value)"';
      }

      $sql    = "SELECT * FROM enlaces_scat WHERE id_enlaces_cat =$categoria";
      $result = db_query( $sql );

      // Creamos el select de subcategorias.
      $respuesta  = '<select id="'.$id.'" name="'.$id.'" '.$evento.' class="select">';
      $respuesta .= '<option  value="">Selecciona una subcategoria</option>';

      while ( $row = mysql_fetch_array( $result ) ) {
         $respuesta .= '<option  value="'.$row["enlaces_scat_id"].'">'.$row["sc_nombre"].'</option>';
      }
      $respuesta .='</select>';
      echo $respuesta;

danielcornejo27 · #3 18-01-2008

Hola, el problema ya lo solucioné como me enseñaste vos agregando un poco de modificaciones. Pero ahora tengo otro problema ya que yo quiero validar y realizar el alta de los datos y no me reconoce el "select" de las localidades. Te paso el codigo para que veas:

Este es el formulario principal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="ajaxprovinciaslocalidades.js"></script>
</head>
<?
// Alta de usuarios
include_once("conexion.php");

$consultaprov = "select provcodigo, provnombre from provincias order by provnombre";
?>
<body>
<form method="post" action="altausuarios.php">
<br>
<table width="100%">
<tr>
<td align="right"><font face="Segoe UI">Provincia (*):</font></td>
<td>
<select size="1" name="solprovincia" id="provincia" onChange="cargaContenido(this.id)">
<option value="0">-- Seleccione una provincia --</option>
<?
$resultadoprov = mysql_query($consultaprov, $conexion);
while($filaprov = mysql_fetch_row($resultadoprov))
{
echo "<option value=".$filaprov[0].">".$filaprov[1]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td align="right"><font face="Segoe UI">Localidad:</font></td>
<td>
<select size="1" name="sollocalidad" id="localidad">
<option value="0">-- Seleccione una localidad --</option>
</select>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="37%"></td>
<td width="63%"><input type="submit" name="ingresar" value=" Guardar mis datos "></td>
</tr>
</table>
</form>
</body>
</html>

Este es el javascript que contiene AJAX:

function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="provincia";
listadoSelects[1]="localidad";
function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}
function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Seleccione...", no voy al servidor y pongo los selects siguientes en estado "Seleccione..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="-- Seleccione una localidad --";
selectActual.appendChild(nuevaOpcion);
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "cargarlocalidad.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Seleccione..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}

Y este es el archivo PHP que se encarga de cargar el "select" de localidades:

<?
// 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(
"provincia"=>"provincias",
"localidad"=>"localidades"
);
function validaSelect($selectDestino)
{
// Se valida que el select enviado via GET exista
global $listadoSelects;
if(isset($listadoSelects[$selectDestino])) 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;
}
$selectDestino=$_GET["select"];
$opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
include_once("conexion.php");
$consultaloc = "select loccodigo, locnombre from $tabla where provcodigo = '$opcionSeleccionada' order by locnombre";

// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."'>";
echo "<option value='0'>-- Seleccione una localidad --</option>";
$resultadoloc = mysql_query($consultaloc, $conexion);
while($filaloc = mysql_fetch_row($resultadoloc))
{
// Convierto los caracteres conflictivos a sus entidades HTML
// correspondientes para su correcta visualizacion
$filaloc[1]=htmlentities($filaloc[1]);
// Imprimo las opciones del select
echo "<option value=".$filaloc[0].">".$filaloc[1]."</option>";
}
echo "</select>";
}
?>

Espero que puedan ayudarme. Saludos

Herramientas	Buscar en Tema
Mostrar Versión Imprimible Enviar por Correo	Buscar en Tema: Búsqueda Avanzada
Desplegado
Cambiar a Modo Lineal Modo Híbrido Cambiar a Modo Hilado

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
relacionar combos	wesito	Conexión con bases de datos	7	25-10-2007 16:58:45
Error al utilizar Array dinámicos	hjpires	Varios	0	12-09-2007 18:16:36
combos	BoNnY0301	OOP	5	06-05-2006 09:07:30
combos con mas de un campo	mar65	Conexión con bases de datos	3	14-01-2005 21:16:50
Problemas con los combos	vetustas	Conexión con bases de datos	3	31-10-2003 00:21:58