JS me desordena mi arreglo :-(

[julia2021]

Hola amiguitos, estoy armando una lista select con JS y me funciona muy bien, sin embargo me pierde el orden y me muestra la lista desordenada. Les muestro el código a ver si me pueden echar una mano

Primero construyo un arreglo llamado $_offices_and_cities que tiene la siguiente forma:

Código:

id_sucursal, id_cliente, nombre, id_ciudad, nombre_ciudad

2, 28, Los Dos Caminos, 149, Caracas
1, 28, Sede Principal, 149, Caracas
7, 9, Torre Hp, 149, Caracas
9, 28, Caripe Del Guacharo, 301, Caripe
8, 22, Casigua Del Cubo, 468, Casigua
11, 28, Ejido, 240, Ejido
5, 22, Agencia Paseo Del Lago, 487, Maracaibo
10, 28, Las Delicias, 64, Maracay

Ahora aplico mi JS

Código Javascript:

<? // INICIO: LISTAS DEPENDIENTES: CLIENTE >> SUCURSAL ///////////////////// ?>
<SCRIPT LANGUAGE="JavaScript">
var arrSucursales   = new Array();
var arrSucursalesId = new Array();
 
<? // Armamos la lista desplegable de los SUCURSALES y las ciudades
 
foreach ($_offices_and_cities as $clave => $sucursal) {
 
    echo 'arrSucursales['.$sucursal['id_sucursal'].'] = "'.$sucursal['nombre_ciudad'].': '.$sucursal['nombre'].'"';echo "\n";
    echo 'arrSucursalesId['.$sucursal['id_sucursal'].'] = '.$sucursal['id_cliente'];echo "\n";
}
?>
function selectChange(control, controlToPopulate2, ItemArray2, GroupArray2)
{
    // Armamos la lista de SUCURSALES
    var myEle2 ;
    var x2 ;
    // Empty the second drop down box of any choices
    for (var q2=controlToPopulate2.options.length;q2>=0;q2--) controlToPopulate2.options[q2]=null;
    // ADD Default Choice - in case there are no values
    myEle2 = document.createElement("option") ;
    myEle2.value = 0 ;
 
    if (control.name == "id_cliente") {
        myEle2.text = "Seleccione la oficina..." ;
    }
    controlToPopulate2.add(myEle2) ;
    // Now loop through the array of individual items
    // Any containing the same child id are added to
    // the second dropdown box
    for ( x2 = 0 ; x2 < ItemArray2.length  ; x2++ )
    {
        if ( GroupArray2[x2] == control.value )
        {
            myEle2 = document.createElement("option") ;
            myEle2.value = x2 ;
            myEle2.text = ItemArray2[x2] ;
            controlToPopulate2.add(myEle2) ;
        }
    }
}
//  End -->
</script>
 
<? // FINAL: LISTAS DEPENDIENTES: CLIENTE >> SUCURSAL ///////////////////// ?>
 

Sin embargo para el cliente 28 me muestra la lista con el siguiente orden:

Código:

- Caracas: Sede principal (1)
- Caracas: Los Dos Caminos (2)
- Caripe: Caripe del Guacharo (9)
- Maracay: Las Delicias (10)
- Elijo: Elijo (11)

Cómo puedo hacer para ordenarlo por nombre_ciudad y no por id_sucursal ???