jQuery foreach-Schleife, um

Question

ich ein Paar von Auswahlboxen, wo der Benutzer zuerst das Land auswählen müssen, dann eine Stadt oder Region in diesem Land wählen:

<select name="ListingCountry" id="ListingCountry"> 
<option value="0">-- Choose the country --</option> 
<option value="1" selected="selected">United Kingdom</option> 
</select> 
<select name="ListingCity" id="ListingCity" class="city"> 
<option value="0">-- Choose the city or region --</option> 
</select> 

Die zweite <select> Bedarf dynamisch auf der Basis zu aktualisieren Auswahl der ersten - dh nur britische Städte und Regionen, die bei der Auswahl von UK angezeigt werden.

Die Listen werden aus einer Datenbank erzeugt und in ein Array gesetzt:

var cityOptions = 
{ 
1 : 
[ 
    { 
    37: "London", 
    1: "Bedfordshire", 
    2: "Berkshire", 
    3: "Birmingham", 
    ... 
    } 
] 
}; 

1 zu den Top-Referenzen das Land ID.

Die ID-Nummern werden von der Datenbank automatisch generiert. Ich möchte, dass das Kapital immer an der Spitze der Liste steht, und dies im Array-Druck erreichen, indem man ein CityOrder Feld verwendet und danach sortiert CityOrder descending - daher warum London (mit einem CityOrder von 1) an der Spitze der Liste trotz ist eine höhere ID als andere, die alle eine CityOrder von 0 haben.

ich dann jQuery verwenden, um dynamisch die Listen zu aktualisieren:

function updateCityOptions(currentCity) 
{ 
var $countryAll = $("#ListingCity"); 
var $countrySel = $("#ListingCountry option:selected").val(); 
if($countrySel!=0) 
{ 
    $('#ListingCity option:gt(0)').remove(); 
    $.each(cityOptions[$countrySel], function(k,v) 
    { 
    $.each(cityOptions[$countrySel][k], function(k2,v2) 
    { 
    if(k2==currentCity) 
    { 
    $countryAll.append($('<option selected="selected"></option>').attr("value", k2).text(v2)); 
    } 
    else 
    { 
    $countryAll.append($('<option></option>').attr("value", k2).text(v2)); 
    } 
    }); 
    }); 
    $(".city").fadeIn(300); 
} 
else 
{ 
    $('#ListingCity option:gt(0)').remove(); 
    $(".city").fadeOut(300); 
} 
} 

Das Problem ist, dass die Reihenfolge der select Box, wenn ein Land gewählt wird, scheint in numerischer Reihenfolge des Arrays zu sein, nicht die Reihenfolge, in was es im DOM gedruckt hat - dh Bedfordshire erscheint zuerst in der Liste (ID Nummer 1) und London geht irgendwo in der Mitte verloren.

Irgendwelche Hinweise?