jQuery new option needs sorting

Question

I've got two dropdowns, as a result of changing the first one it triggers a jquery change() that does a post with the company id from the first dropdown. That then runs a sql query to get a list of people that work for that company and fills the select box with options. This is working fine and I've got the sql query set to ORDER BY admin_name. But when jquery starts inserting the options into the dropdown it appears to be sorting by the option value instead (admin_id). What can I do to keep the options ordered by the admin_name (the text of the option). Below is the jQuery code responsible for adding the options:

$.post("listSignedBy.php", { company_id: company_id },
                function(data) {
                        alert(data); <-- this shows that the data is sorted correctly by the admin name.
                        var select = $('#signed_by');
                        if(select.prop) {
                                  var options = select.prop('options');
                        }
                        else {
                                  var options = select.attr('options');
                        }
                        $('option', select).remove();

                        var obj = jQuery.parseJSON(data);
                                    options[options.length] = new Option('-- Select Signed By --', '');
                        $.each(obj, function(val, text) {
                                    options[options.length] = new Option(text, val);
                        });
                        select.val(selectedOption);

                });

Thank you for any assistance and please let me know if you need any further information to help troubleshoot/fix.

As requested, example JSON data:

{"19082":"Aaron Smith","19081":"Becky Doe"}

So in this case what I WANT is:

<option value='19082'>Aaron Smith</option>
<option value='19081'>Becky Doe</option>

But instead of sorting by the text, it's sorting by the value so I get:

<option value='19081'>Becky Doe</option>
<option value='19082'>Aaron Smith</option>

Could you post an fake entry that is listed in the returning JSON? — VVV, Sep 20 '12 at 15:31
Can you post the json data.. maybe couple of entries shold be fine — Sushanth --, Sep 20 '12 at 15:32

score 1 · Accepted Answer · edited May 23 '17 at 12:04

The object is not sorted.. It is actually getting inserted in the order how it is iterated.

However, in case if the order of returned response is not in the desired order then the best way is it insert the options first and sort the options. See below,

DEMO: http://jsfiddle.net/gGd82/3/

// convert OPTIONs NodeList to an Array
// - keep in mind that we're using the original OPTION objects
var ary = (function(nl) {
    var a = [];
    for (var i = 0, len = nl.length; i < len; i++) {
      a.push(nl.item(i));
    }
    return a;
})(options);
// sort OPTIONs Array
ary.sort(function(a, b) {
    return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;    
});
// remove all OPTIONs from SELECT (don't worry, the original
// OPTION objects are still referenced in "ary") ;-)
options.length = 0;

// (re)add re-ordered OPTIONs to SELECT
select.html(ary);

select.prepend($('<option />').text('-- Select Signed By --').val(''));

References: Sorting dropdown list using Javascript

Vega, thanks very much for the response. I was able to get the final solution just a couple of minutes before (or at the same time) as when you posted your response. I've included my own resolution in another answer to the op. Thanks again. — Scott Rowley, Sep 24 '12 at 16:11

score 0 · Answer 2 · answered Sep 24 '12 at 16:10

I was able to get it working by creating the following function and then referencing that function just after the .each() that entered all of the options in:

function Sort(a, b) {    
                return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

$.post("listSignedBy.php", { company_id: company_id },
                function(data) {
                        var select = $('#signed_by');
                        if(select.prop) {
                                  var options = select.prop('options');
                        }
                        else {
                                  var options = select.attr('options');
                        }
                        $('option', select).remove();

                        var obj = jQuery.parseJSON(data);
                                    options[options.length] = new Option('-- Select Signed By --', '');
                        $.each(obj, function(val, text) {
                                    options[options.length] = new Option(text, val);
                        });
                        $('#signed_by option').sort(Sort).appendTo('#signed_by');
                        select.val(selectedOption);

                });

Try using `return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;` as comparator is supposed to return -1, 0 or 1. Also `.text` is better than `.innerHTML` but that may be just me. — Selvakumar Arumugam, Sep 24 '12 at 16:17

jQuery new option needs sorting

2 Answers2