Select the selection menu in alphabetical order?

Question

I have the following selection menu ( jsFiddle ):

<select> <option value="volvo">Cars</option> <option value="saab">------------</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

Using Javascript, how would I sort the list alphabetically, excluding the first 2 options ( Cars and ------- ) that should remain at the top? Thanks in advance for any help.

Answer 1

As a purist, I would say that in no case was jQuery specifically mentioned or requested, it may not be used in this project for one reason or another. Here is an example using pure javascript.

 function sortlist(){ var cl = document.getElementById('carlist'); var clTexts = new Array(); for(i = 2; i < cl.length; i++){ clTexts[i-2] = cl.options[i].text.toUpperCase() + "," + cl.options[i].text + "," + cl.options[i].value + "," + cl.options[i].selected; } clTexts.sort(); for(i = 2; i < cl.length; i++){ var parts = clTexts[i-2].split(','); cl.options[i].text = parts[1]; cl.options[i].value = parts[2]; if(parts[3] == "true"){ cl.options[i].selected = true; }else{ cl.options[i].selected = false; } } } sortlist(); 

http://jsfiddle.net/GAYvL/7/

Updated to be case insensitive.

Answer 2

My first approach was similar to Koolinc's, using Array.prototype.slice to convert the <select> child NodeList element to an array. However, this does not work in Internet Explorer 8 and below, so I changed it to extract, sort, and reinstall:

 var sel = document.getElementsByTagName("select")[0], opts = []; // Extract the elements into an array for (var i=sel.options.length-1; i >= 2; i--) opts.push(sel.removeChild(sel.options[i])); // Sort them opts.sort(function (a, b) { return a.innerHTML.localeCompare(b.innerHTML); }); // Put them back into the <select> while(opts.length) sel.appendChild(opts.shift()); 

Working demo: http://jsfiddle.net/3YjNR/2/

Answer 3

I would start by providing the class name to all the elements that I want to sort, and giving an identifier for selection:

  <select id="sortableCars"> <option value="volvo">Cars</option> <option class="sortMe" value="saab">------------</option> <option class="sortMe" value="volvo">Volvo</option> <option class="sortMe" value="saab">Saab</option> <option class="sortMe" value="mercedes">Mercedes</option> <option class="sortMe" value="audi">Audi</option> </select> 

as for javascript

  var mylist = $('#sortableCars'); var listitems = mylist.children('option.sortMe').get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }) $.each(listitems, function(idx, itm) { mylist.append(itm); }); 

Answer 4

This is just a more general answser based on the @Jeff Parker one!

 function sortSelect(select, startAt) { if(typeof startAt === 'undefined') { startAt = 0; } var texts = []; for(var i = startAt; i < select.length; i++) { texts[i] = [ select.options[i].text.toUpperCase(), select.options[i].text, select.options[i].value ].join('|'); } texts.sort(); texts.forEach(function(text, index) { var parts = text.split('|'); select.options[startAt + index].text = parts[1]; select.options[startAt + index].value = parts[2]; }); } 

I also created a violin; http://jsfiddle.net/4u86B/1/