how to sort select option in lexical order

Question

i have a select option

<select>
<option>aaa</option>
<option>ccc</option>
<option>ddd</option>
<option>bbb</option>
</select>

How to sort them. so output will

aaa
bbb
ccc
ddd

this question is asked to me in an interview answer if any Know Thanks In advance

Try [**this jQuery Plugin**](https://github.com/GodsBest/sortSelect) — PeterKA, May 29 '14 at 12:29
Thanks .......may it was an duplicate question but i really don't know the answer — mayank chaturvedi, May 29 '14 at 12:47

laaposto · Accepted Answer · 2014-05-29T12:36:59.273

4

You can use use JavaScript sort method. It sorts the elements in lexical order. So you can set the innerHTML of the select element based on the result of the sort function.

Read more about the sort function here

Try:

$("select").html($('select option').sort(function (x, y) {

    return $(x).text() < $(y).text() ? -1 : 1;

}))

DEMO

edited May 29 '14 at 12:36

answered May 29 '14 at 12:16

laaposto

11,377
15
52
68

can u please explain it to me – mayank chaturvedi May 29 '14 at 12:28
1

@mayankchaturvedi Updated answer – laaposto May 29 '14 at 12:37
In case anyone has options that look like "20 people", "5 people" and want to properly sort them (the "2" from "20" will come before "5") you can use `return parseInt($(x).text().split(' ')[0]) < parseInt($(y).text().split(' ')[0]) ? -1 : 1;` and "5 people" will come before "20 people". – nickpapoutsis Jul 09 '21 at 20:36

score 0 · Answer 2 · answered May 29 '14 at 12:17

Add an id

<select id='myselect'>
<option>aaa</option>
<option>ccc</option>
<option>ddd</option>
<option>bbb</option>
</select>

Get all options in an array, sort it and then change the values of the select

var array = new Array();
$("#myselect option").each(function() { array.push($(this).text()) });
array.sort();

$("#myselect option").each(function(index,elem) { $(this).html(array[index]) });

score 0 · Answer 3 · answered May 29 '14 at 12:19

Working Fiddle

$('#sort').click(function () {
$('select').each(function () {
   var options = $(this).children('option');
    options.sort(function (optionA, optionB) {
        return optionA.value.localeCompare(optionB.value);
    });
    $(this).empty().append(options);
});
});

how to sort select option in lexical order

3 Answers3