Combos dinamicos (sin array)

[danielcornejo27]

Hola, necesito que me expliquen como actualizar los datos de un combo dependiendo de la informacion seleccionada en otro combo pero sin utilizar ARRAY. O sea que cuando un usuario seleccione una provincia, por ejemplo, el servidor vaya a la base de datos y muestre las localidades de esa provincia. Espero que me haya explicado bien. Saludos

[dec]

Hola,

¿Qué quiere decir "sin utilizar Array"? ¿Intentaste algo? ¿Tienes algo pensado?

[danielcornejo27]

Yo lo se hacer con javascripts, cargando todas las localidades en un array y luego filtrando segun la provincia, pero lo que yo quiero hacer es cargar solamente las localidades de la provincia seleccionada

[dec]

Hola,

Pero, supongo que quieres montar el asunto vía "AJAX", es decir, obtener en una petición HTTP en segundo plano, las localidades correspondientes a una determinada provincia. Si es así, depende de cómo tengas hecho ya algunas cosas.

Por ejemplo, tendrías que contar con un script que te retornara las localidades de una provincia partiendo de un identificador de esta, que llegaría al script vía HTTP GET ó HTTP POST. El script retornaría las localidades... como mejor tú lo veas.

Si usaras una librería JavaScript como jQuery, realmente, el tema del "AJAX" no te sería nada complicado, al contrario. jQuery cuenta con un método "load" que te permitiría cargar el resultado del script susomentado dentro de un elemento del DOM.

Si no quieres usar jQuery... o usas alguna otra librería, el asunto sería siempre el mismo: hacer una petición HTTP al servidor indicando el identificador de una provincia, el script oportuno retornará las localidades correspondientes a dicha provincia, y, "quien se encargue" (en el evento "onchange" del "ComboBox" de provincias) de hacer la petición se encargaría también de añadir al "ComboBox" de localidades los elementos correspondientes.

No sé si lo dicho te sirve de algo, te da alguna pista, te lía más o qué...

[[fer21unmsm]]

Empezado por danielcornejo27

Yo lo se hacer con javascripts, cargando todas las localidades en un array y luego filtrando segun la provincia, pero lo que yo quiero hacer es cargar solamente las localidades de la provincia seleccionada

Hola Daniel, lo que quieres es utilizar AJAX, te dejo un link para el uso de ajax:

http://xajaxproject.org/

saludos cordiales.

[*Emilio*]

La sección de enlaces del Club hace exactamente lo que pretendes, puedes pegar un vistazo al código cliente, la parte servidor únicamente hace la consulta y devuelve los datos al contenedor.

[danielcornejo27]

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

[*Emilio*]

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]

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