Sort drop down options

Question

I am trying this solution to sort out a drop down menu but having two digits in the options, 14 and 11 comes before 8 and 9.

How should I approach this?

My code is as follows:

<select id="test">
    <option>Size 9</option>
    <option>Size 14</option>
    <option>Size 8</option>
    <option>Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}))

I will need a solution to sort the drop down even if there are only characters, not mixed.

jsfiddle

Could you clarify what you mean by "only characters"? Do you mean something like "small", "medium" and "large"? — benjaminjosephw, Mar 03 '14 at 10:09
You are comparing strings. `Size 14` is always in first place before `Size 9`. Put numerical values for options so you can sort by numbers. — Justinas, Mar 03 '14 at 10:09
Actually you are sorting as per text.So when sorting applies it first sort w.r.t to first digit in that case 1 come before 8,9 and then it sort afterwards. — Innovation, Mar 03 '14 at 10:11
both strings and numbers; so yes, I would sometimes have small, medium and large — Christopher, Mar 03 '14 at 10:14

A. Wolff · Accepted Answer · 2014-03-03T10:36:25.550

You could use following snippet which btw will set value for each option:

DEMO jsFiddle

$("#test").html($("#test option").val(function(){
    return this.text.match(/\d+/);
}).sort(function (a, b) {
    var a = parseInt(a.value,10), b = parseInt(b.value,10);
    return a < b ? -1 : 1;
}));

Or without setting values:

DEMO

$("#test").html($("#test option").sort(function (a, b) {
    var a = parseInt(a.text.match(/\d+/),10), b = parseInt(b.text.match(/\d+/),10);
    return a < b ? -1 : 1;
}));

EDIT: ( following comment)

You could skip sorting default option like this:

DEMO

$("#test").html($("#test option").val(function (i) {
    return i !== 0 ? this.text.match(/\d+/) : this.value;
}).sort(function (a, b) {
    var a = parseInt(a.value !== ""?a.value:-1, 10),
        b = parseInt(b.value, 10);
    return a < b ? -1 : 1;
}));

thanks; how would I make it ignore the first option with ''? As that is getting sorted too. — Christopher, Mar 03 '14 at 10:28

score 0 · Answer 2 · answered Mar 03 '14 at 10:23

You can sort by value

html

<select id="test">
    <option value='9'>Size 9</option>
    <option value='14'>Size 14</option>
    <option value='8'>Size 8</option>
    <option value='11'>Size 11</option>
</select>

js

$("#test").html($("#test option").sort(function (a, b) {
    return parseInt($(a).val()) == parseInt($(b).val()) ? 0 : parseInt($(a).val()) < parseInt($(b).val()) ? -1 : 1;
}));

DEMO

score 0 · Answer 3 · answered Mar 03 '14 at 10:24

When you compare text two text field, that contains some numbers. Comparison works on first numeric value only.

For example : if we compare size 9 with size 14, then you can get surprising results like size 9 is greater than size 14. This is because only first numeric value is being compare so for 14 the value is numeric value is 1.

In your case a simple solution might be applying a value field to options and using value for comparisons.

<select id="test">
    <option value ="9">Size 9</option>
    <option value ="14">Size 14</option>
    <option value ="8">Size 8</option>
    <option value ="11">Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return parseInt(a.value,10) == parseInt(b.value,10) ? 0 : parseInt(a.value,10) < parseInt(b.value,10) ? -1 : 1;
}))

Sort drop down options

3 Answers3