Hola mis amigos, he tomado un código de aquí de FDW acerca de 3 select dependientes en cascada, lo he adaptado a mi código y me funciona de las mil maravillas.Lo utilizo para seleccionar País>Estado>Ciudad.
Para llenar cada
select utilizo array ordenados por "nombre", sin embargo cuando selecciono un item del Primer select, los item del segundo aparecen ordenados por el "id" y no por el "nombre".
Aquí les dejo el código:
Código PHP:
<? // INICIO: LISTAS DEPENDIENTES: PAIS >> ESTADO >> CIUDAD ///////////////////// ?>
<SCRIPT LANGUAGE="JavaScript">
var arrEstados = new Array();
var arrEstadosId = new Array();
<? // Armamos la lista desplegable de los ESTADOS
foreach ($_estados as $clave => $estado) {
echo 'arrEstados['.$estado['id_estado'].'] = "'.$estado['nombre'].'"';echo "\n";
echo 'arrEstadosId['.$estado['id_estado'].'] = '.$estado['id_pais'];echo "\n";
}
?>
var arrCiudades = new Array();
var arrCiudadesId = new Array();
<? // Armamos la lista desplegable de las CIUDADES
foreach ($_ciudades as $clave => $ciudad) {
echo 'arrCiudades['.$ciudad['id_ciudad'].'] = "'.$ciudad['nombre'].'"';echo "\n";
echo 'arrCiudadesId['.$ciudad['id_ciudad'].'] = '.$ciudad['id_estado'];echo "\n";
}
?>
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "id_pais") {
// Empty the third drop down box of any choices
for (var q=form.id_ciudad.options.length;q>=0;q--) form.id_ciudad.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
if (control.name == "id_pais") {
myEle.text = "Seleccione el estado..." ;
}
if (control.name == "id_estado") {
myEle.text = "Seleccione la ciudad..." ;
}
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>;
<? // FINAL: LISTAS DEPENDIENTES: PAIS >> ESTADO >> CIUDAD ///////////////////// ?>
Los select:
Código HTML:
[B] // SELECT DE PAISES[/B]
<select id="id_pais" name="id_pais" onChange="selectChange(this, form.id_estado, arrEstados, arrEstadosId);">
<option value="" selected>Seleccione el país...</option>
<optgroup label="Países activados:">
<?
foreach ($_paises as $clave => $pais) {
$contador++;
?>
<option value="<?php echo $pais[id_pais];?>">» <?php echo $pais[nombre];?></option>
<? } ?>
</optgroup>
</select>
[B] // SELECT DE ESTADOS[/B]
<select id="id_estado" name="id_estado" onChange="selectChange(this, form.id_ciudad, arrCiudades, arrCiudadesId);">
</select
[B] // SELECT DE CIUDADES [/B]
<select id="id_ciudad" name="id_ciudad">
</select> Cabe destacar que los array iniciales usados en los
foreach tienen la siguiente forma:
$_paises > id_pais, nombre
$_estados > id_estado, nombre
$_ciudades > id_ciudad, nombre
A pesar que tengo los array ordenados por "nombre", el javascript me cambia el orden y lo ordena por los "id". Que puedo hacer para ordenarlo por "nombre" ???