[SOLUCIONADO] Ordenar un Select Dependientes

[julia2021]

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];?>">&raquo; <?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" ???

[Triby]

Si el orden ya lo tienes y no lo respeta Javascript, está claro que no es problema de PHP; muevo tu tema al foro adecuado.

[julia2021]

OK, gracias Triby. Hola amigos de JS, alguien pudiera apoyarme con este inconveniente ?