Adding options to a select using jQuery - changing the order

Question

I wrote the following code to populate a listbox in Jquery (based on What is the best way to add options to a select from an array with jQuery?)

function populate(id, selectValues, theSelected, empty) {
    if (empty) {
        $(id).empty();
    }
    $.each(selectValues, function(key, value) {
        $(id).append($("<option></option>").attr("value", key)
             .prop('selected', key == theSelected).text(value));
    });
}

I call the function using e.g. the following code

populate('#BASE1', {
    "8": "2012 average=100",
    "7": "2010 average=100",
    "6": "2008 average=100",
    "5": "2006 average=100",
    "4": "2002 average=100",
    "3": "2000 average=100",
    "2": "1998 average=100",
    "1": "1993 average=100"
}, selectedBase, true);

However the list is ordered in the order of the ID - i.e. List in reverse order

How can I adapt my populate function to order them in the order in which I list them? (Obviously I could re-assign the ID's but I was wondering if there is another solution)

Milind Anantwar · Accepted Answer · 2015-02-05T12:11:33.167

2

change .append() to .prepend():

$.each(selectValues, function(key, value) {
    $(id).prepend($("<option></option>").attr("value", key)
         .prop('selected', key == theSelected).text(value));
});

Working Demo

edited Feb 05 '15 at 12:11

answered Feb 05 '15 at 11:21

Milind Anantwar

81,290
25
94
125

Thank you! BTW I assume I am supposed to remove the `.find('.test')` – gordon613 Feb 05 '15 at 12:06
However there is an error `Object doesn't support property or method 'appendTo'`.... – gordon613 Feb 05 '15 at 12:07

score 2 · Answer 2 · answered Feb 05 '15 at 12:22

The issue it that you can't rely on order of object properties, there is simply no such thing as order for them. Instead use an array of objects.

Improved code will look like this:

function populate(id, selectValues, theSelected, empty) {
    if (empty) {
        $(id).empty();
    }
    $.each(selectValues, function(i, obj) {
        $(id).append($("<option></option>").attr("value", obj.id)
             .prop('selected', obj.id == theSelected).text(obj.text));
    });
}

var selectedBase = 3;

populate('#BASE1', [
    {id: "8", text: "2012 average=100"},
    {id: "7", text: "2010 average=100"},
    {id: "6", text: "2008 average=100"},
    {id: "5", text: "2006 average=100"},
    {id: "4", text: "2002 average=100"},
    {id: "3", text: "2000 average=100"},
    {id: "2", text: "1998 average=100"},
    {id: "1", text: "1993 average=100"}
], selectedBase, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="BASE1"></select>

Adding options to a select using jQuery - changing the order

2 Answers2