[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 ?