Sort Options in a Select List with javascript/jQuery.. but not alphabetically

Question

I am looking for a function that will take a list of options in a select list and sort them alphabetically but with a twist. All values with the text 'NA' should be pushed to the bottom of the list.

So given a list -

<select>
    <option value="1">Car</option>
    <option value="2">Bus</option>
    <option value="3">NA</option>
    <option value="4">Bike</option>
    <option value="5">Tractor</option>
    <option value="6">NA</option>
</select>

We should end up with -

<select>
    <option value="4">Bike</option>
    <option value="2">Bus</option>
    <option value="1">Car</option>
    <option value="5">Tractor</option>
    <option value="3">NA</option>
    <option value="6">NA</option>
</select>

The order of the NAs is not important.

And don't ask why I cannot just remove the NAs (or why there will be several options with the same texts but different underlying values, because I don't agree with it either.

Worth noting for all these answers: sorting will change which option is selected. You must persist the value of the select element before the sort and restore it afterwards. — Steve Clay
– Steve Clay, Commented Nov 25, 2014 at 16:42

kei · Accepted Answer · 2011-07-12 19:58:37Z

45

demo: http://jsfiddle.net/4bvVz/

function NASort(a, b) {    
    if (a.innerHTML == 'NA') {
        return 1;   
    }
    else if (b.innerHTML == 'NA') {
        return -1;   
    }       
    return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

$('select option').sort(NASort).appendTo('select');

answered Jul 12, 2011 at 19:58

kei

20.5k2 gold badges38 silver badges64 bronze badges

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

Comments

score 16 · Accepted Answer · 2011-07-12 19:56:58Z

16

var sb = $('select');

sb.append(sb.find('option').sort(function(a, b){
    return (
        a = $(a).text(),
        b = $(b).text(),
        a == 'NA' ? 1 : b == 'NA' ? -1 : 0|a > b
    );
}));

edited Jul 12, 2011 at 19:56

answered Jul 12, 2011 at 19:51

user578895

Comments

Francisco Costa · Accepted Answer · 2014-01-11 17:37:33Z

1

If you have more than one select in the page (multiple selects) use this:

function NASort(a, b) {
    if (a.innerHTML == 'NA') {
        return 1;
    }
    else if (b.innerHTML == 'NA') {
        return -1;
    }
    return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

$('select').each(function( index ) {
    $(this).find('option').sort(NASort).appendTo($(this));
});

edited Jan 11, 2014 at 17:37

answered Dec 18, 2013 at 18:18

Francisco Costa

7,2415 gold badges36 silver badges43 bronze badges

Comments

Luís Cruz · Accepted Answer · 2014-10-09 15:16:49Z

1

I've made some changes to the original function and it worked fine.

function NASort(a, b) {  
    console.log(a.innerHTML.substr(0, 1).toLowerCase() + ' > ' + b.innerHTML.substr(0, 1).toLowerCase());
    return (a.innerHTML.substr(0, 1).toLowerCase() > b.innerHTML.substr(0, 1).toLowerCase()) ? 1 : -1;
};

$('select option').sort(NASort).appendTo('select');

edited Oct 9, 2014 at 15:16

Luís Cruz

15k16 gold badges71 silver badges100 bronze badges

answered Oct 9, 2014 at 14:24

Jaime Valasek

112 bronze badges

Collectives™ on Stack Overflow

Sort Options in a Select List with javascript/jQuery.. but not alphabetically

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related