How do I add options to a DropDownList using jQuery (ordered)?

Question

This question is similar to this one How do I add options to a DropDownList using jQuery? but I would like to add it in an ordered fashion. The example in the other question just adds it to the end of the list. The code is as follows:

var myOptions = {
      1: "Test"
      2: "Another"
};
$.each(myOptions, function(val, text) {
      $('#Projects').append(
           $('<option></option').val(val).html(text)
      );
});

Suppose the list already contains 3 items: "Blah", "Foo" and "Zebra". I'd like to be able to add the two new options ("Test" and "Another") to the dropdown so it's ordered ("Another", "Blah", "Foo", "Test" and "Zebra") using jQuery.

Any help is much appreciated!!!

Scott McMillin · Accepted Answer · 2009-05-18 21:32:43Z

1

Give this a go:

// Sort Function
function sortAlpha(a,b) { 
    if(a.name > b.name) {
        return 1;
    } else if(a.name < b.name) {
        return -1;
    }
    return 0;
}


// Options you want to add
var myOptions = [ {id:1, name:"Test"}, {id:2, name:"Another" } ];

// Create array from existing options and merge
$.merge(myOptions, 
    $.map( $('#Projects').find('option'), function(n){ 
        return { id:n.value, name:n.innerHTML}; 
    }) 
);

// Sort all options using above sort function
myOptions.sort(sortAlpha);

// Clear the <select> of existing options
$('#Projects').empty();

// Add the options to the <select>
$.each(myOptions, function() {
      $('#Projects').append(
           $('<option></option').val(this.id).html(this.name)
      );
});

answered May 18, 2009 at 21:32

Scott McMillin

5313 silver badges8 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:48:41Z

1

Take a look at the jQuery related answer here. You would, of course, need to add your new options before calling the sort method.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered May 18, 2009 at 21:17

Jab

13.8k2 gold badges45 silver badges48 bronze badges

Collectives™ on Stack Overflow

How do I add options to a DropDownList using jQuery (ordered)?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related