How can I sort the data in a dynamically generated SELECT element with jQuery?

Question

I am using JQuery to populate SELECT elements in order to cut down on the size of the outputted markup.

Everything is working the way I want except for one thing; the sorting.

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

How can I accomplish this?

Many thanks.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Code</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type = "text/javascript" >
      $(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( $('<option></option>').val('').html('----------') );
      $.each( dyn_list_product , function(val, text) { $('.jquery_list_product').append( $('<option></option>').val(val).html(text) ); });
      })
    </script>
  </head>

  <body>
    <select name="insert-1[]" class="jquery_list_product"></select>
    <select name="insert-2[]" class="jquery_list_product"></select>
    <select name="insert-3[]" class="jquery_list_product"></select>
  </body>
</html>

Ram · Accepted Answer · 2012-12-31 22:28:57Z

3

The jQuery code isn't sorting anything. The order of iteration through the keys of an object is undefined in JavaScript. That is, the fact that you defined the properties in some order means nothing about the order in which the .each() function will pass them to your handler.

Use an array instead:

var dyn_list_product = [ { key: '10075', val: 'abc'}, { key: '10635', val: :'def'}, ... ];

Your .each() loop will then look like:

$.each( dyn_list_product , function(index, obj) {
    $('.jquery_list_product').append( $('<option></option>').val(obj.key).html(obj.val) ); });
})

edited Dec 31, 2012 at 22:28

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Dec 31, 2012 at 22:25

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pointy Over a year ago

@undefined thanks :-) It drives me crazy that $.each() passes the index first like that.

Ralph M. Rivera Over a year ago

I don't understand what you mean by "the order is undefined". If you look at the example, the order is very clearly, the val portion as opposed to the html portion. This is consistent regardless of the order that I generate the list, the order will always by based on the val.

Pointy Over a year ago

@HumanBacon the jQuery .each() function will use either a for ... in loop or else Object.keys() to drive the iteration. In neither case is there any guarantee that the order in which the key/value pairs are delivered by the internals of the JavaScript runtime will have anything to do with what the object looks like when you defined it, or the order in which properties were added afterwards.

Pointy Over a year ago

@HumanBacon oh I see where I wasn't clear - I mean the original object that you're iterating through, not the parameters passed to your .each() function. The problem is that the properties of an object appear in no defined order when you examine the object. With an array, you guarantee a particular ordering.

Collectives™ on Stack Overflow

How can I sort the data in a dynamically generated SELECT element with jQuery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related