title: Sort JSON array based on value with jQuery
body: <p>I've got two dropdown select dropdowns: one for regions and one for cities in the selected region. The result is loaded by AJAX and in my response i get all cities in an JSON array:</p>
  
  <pre><code>{
      1709: "Geertruidenberg", 
      1710: "Netersel", 
      1711: "Macharen", 
      1712: "Beers", 
      1713: "Hank", 
      1714: "Oudemolen", 
      1715: "Nistelrode"
  }
  </code></pre>
  
  <p>I'm using this small plugin to load the data in the select dropdown:</p>
  
  <pre><code>(function($, window) {
      $.fn.replaceOptions = function(options) {
          var self, $option;
  
          this.empty();
          self = this;
  
          $.each(options, function(index, option) {
              $option = $("&lt;option&gt;&lt;/option&gt;")
                  .attr("value", index)
                  .text(option);
              self.append($option);
          });
      };
  })(jQuery, window);
  </code></pre>
  
  <p>And this piece of javascript to do the AJAX request:</p>
  
  <pre><code>$('select#Profile_regionId').change(function() {
      $.post('/ajax/getcities', {regionid: $(this).val()}, function(data){
          //console.log(data.cities);
          $("select#Profile_cityId").replaceOptions(data.cities);
      }, 'json');
  });
  </code></pre>
  
  <p>All works totally fine, except the city dropdown is automatically sorted on the JSON array key. I tried to use the sort() method for this, but it won't work because it's an Object and not an array. Then i tried to create an array of it:</p>
  
  <pre><code>var values = [];
  $.each(data.cities, function(index,value)) {
      values[index] = value;
  }
  </code></pre>
  
  <p>But for some reason, the dropdown list fills itself up from 1 to the first found id (key of array) of the city, and i don't know why it's doing that (array itself looks fine).</p>
  
  <p>How can i sort the thing so my cities are ordered alphabetically in the dropdown list?</p>