How can I sort the data in a dynamically generated SELECT element with jQuery?
<p>I am using JQuery to populate SELECT elements in order to cut down on the size of the outputted markup.</p>

<p>Everything is working the way I want except for one thing; the sorting.</p>

<p>It looks like by the time I get to the <code>.each</code> in the code below, the JQuery is sorting by the <code>val</code> value instead of the <code>text</code> value. I want the list sorted by the <code>text</code> value or more ideally, in the order that I generate the list in the variable <code>dyn_list_product</code>.</p>

<p>How can I accomplish this?</p>

<p>Many thanks.</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Sample Code&lt;/title&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type = "text/javascript" &gt;
      $(document).ready(function(){
      var dyn_list_product = { 10075:'abc', 10635:'def', 10246:'ghi', 10245:'jkl', 10076:'mno', 10642:'pqr', 10995:'stu', 10255:'vwx', 10230:'yz' };
      $('.jquery_list_product').append( $('&lt;option&gt;&lt;/option&gt;').val('').html('----------') );
      $.each( dyn_list_product , function(val, text) { $('.jquery_list_product').append( $('&lt;option&gt;&lt;/option&gt;').val(val).html(text) ); });
      })
    &lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;select name="insert-1[]" class="jquery_list_product"&gt;&lt;/select&gt;
    &lt;select name="insert-2[]" class="jquery_list_product"&gt;&lt;/select&gt;
    &lt;select name="insert-3[]" class="jquery_list_product"&gt;&lt;/select&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
