Question

I have a <select> element which has some initial values, how can I add a value to the select and then order it alphabetically.

I can add options with some simple JavaScript:

var select = document.getElementById("example-select");
select.options[select.options.length] = new Option('Text 1', 'Value1');

…but that only appends it to the end.

How can I sort a <select> element by JavaScript without using jQuery.

Answer 1

give this a try.

var select = document.getElementById("example-select");

var options = select.options;
var newOption = new Option('Text 1', 'Value1');

for (var i = 0, len = options.length; i < len; i++) {
    if (newOption.text.localeCompare(options[i].text) < 0) {
        break;
    }
}

select.insertBefore(newOption, options[i] || null);