Listas dependientes Tengo 1 inconveniente, estoy terminando mi formulario de contacto con 2 listas dependientes (paises y ciudades), he bajado 1 archivo con el codigo php+js+css y si me cargan las 2 listas, el funcionamiento esta perfecto.
La pantalla principal al inicio muestra 1 lista (paises) como activada y muestra la lista de al lado (ciudades) como desactivada... hasta ahí todo bien.
Luego al escoger una opcion "cualkiera" de paises, la lista de ciudades se activa y muestra sus opciones pero al lado tambien se muestra otra lista desactivada.
Les explico, el archivo php original que descargue... en las etiquetas <body></body> muestra 2 select (1 activo para paises y otro no activo para ciudades) en el select de paises llama a una funcion php (ubicado al inicio del programa) para cargar la info. de paises y obviamente en el evento onchange llama al metodo cargacontenido(this.id) ubicado en el archivo .js...
Este metodo cargacontenido(this.id) envia 2 parametros usando GET a otro archivo.php el cual recibe los parametros y muestra usando
echo "<select....parametros>";
el select, llamandose del mismo nombre en su ID y NAME como el select desactivado que comenté en parrafo superior.
Bueno los 2 ultimos parrafos explican el funcionamiento correcto del programa original, lo he modificado a mi conveniencia, eliminando el 2do. archivo php para solamente tener 1 archivo .php en el que escribo la funcion para paises y el codigo para recibir con GET los valores enviados por el metodo cargarcontenido(this.id) del archivo .js, logicamente luego muestro la lista de ciudades, pero tomen en cuenta que inicialmente presento un select desactivado
Dicho select no se como no mostrarlo ya que simplemente quiero mostrar 2 select y realmente muestro 3 .
Detallo codigo a continuacion:
Archivo select_dependientes.php
Código:
<?php
error_reporting(E_PARSE);
function generaPaises()
{
require('conexion.php');
$link=conectar();
$lcsql="SELECT codigo, detalle FROM pais";
$consulta =mysql_query($lcsql,$link);
if (!$consulta)
{ die ("No se pudo realizar la consulta PAIS". mysql_errno()." : ".mysql_error());
}
else
{ // Voy imprimiendo el primer select compuesto por los paises
echo "<select name='paises' id='paises' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
while($registro=mysql_fetch_array($consulta))
{ echo "<option value='".$registro['codigo']."'>".$registro['detalle']."</option>";
}
}
echo "</select>";
}
?>
<body>
<div id="demo" style="width:600px;">
<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
// Aqui vincula el indice paises o estados con su respectivo valor pais o ubicacion, es decir imaginar un arreglo normal con indice y con valor respectivo
$listadoSelects=array("paises"=>"pais","estados"=>"ubicacion");
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];
require('conexion.php');
$link=conectar();
$lcsql="SELECT ubicacion.codigo, detalle FROM $tabla,ciudad WHERE ubicacion.pais='$opcionSeleccionada' and ubicacion.ciudad=ciudad.codigo ORDER BY detalle";
$consulta =mysql_query($lcsql,$link);
if (!$consulta)
{ die ("No se pudo realizar la consulta CIUDAD". mysql_errno()." : ".mysql_error());
}
else
{ // Comienzo a imprimir el select
echo "<br>".$selectDestino;
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
while($registro=mysql_fetch_array($consulta))
{// Convierto los caracteres especiales para su correcta visualizacion
$registro['detalle']=htmlentities($registro['detalle']);
// Imprimo las opciones del select
echo "<option value='".$registro['codigo']."'>".$registro['detalle']."</option>";
}
echo "</select>";
}
}
?>
<div id="demoDer">
<select disabled="disabled" name="estados" id="estados">
<option value="0">Selecciona opción...</option>
</select>
</div>
<div id="demoIzq"><?php generaPaises(); ?></div>
</div>
</body>
Archivo select_dependientes.js
Código:
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]="paises";
listadoSelects[1]="estados";
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 "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
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="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
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", "select_dependientes.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." 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);
}
}
