Sort Select list in numerical order
Hi,
I have a few select lists that are sorted alphabetically using the below code but it isn't sorting the numbers right. Its displaying like the example below:
Its doing:
150
200
50
When it should be:
50
150
200
Id like to sort just this one select list in numerical order. Can anyone help please as I am stuck and just learning Javascript :)
Code:
function sortDropDownListByText() {
// Loop for each select element on the page.
$("select").each(function() {
// Keep track of the selected option.
var selectedValue = $(this).val();
// Sort all the options by text. I could easily sort these by val.
$(this).html($("option", $(this)).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));
// Select one option.
$(this).val(selectedValue);
});
}
Many thanks
Joe
Re: Sort Select list in numerical order
Your sort function is purely for text. If you want to sort numerically then the function should read:
If you have a combination of select controls on the page though you might want to add a class to each one relating to whether they should be numerically sorted or text sorted, so for all the SELECT controls that have text add the class:
Code:
<select class='textsort'>
<option value='AAA'>AAA</option>
<option value='CCC'>CCC</option>
<option value='BBB'>BBB</option>
</select>
And all the numerical selects have their own class:
Code:
<select class='numsort'>
<option value='150'>150</option>
<option value='200'>200</option>
<option value='50'>50</option>
</select>
And then make your jQuery dependent upon SELECTs having that class:
Code:
$('select.numsort').each(function(){
...etc...
$(this).html($("option", $(this)).sort(function(a, b) {
return a-b;
}));
...etc...
And all the textsort SELECTs then using your sort function:
Code:
$('select.textsort').each(function(){
...etc...
$(this).html($("option", $(this)).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));
...etc...
Mind you, there's probably a way of creating a function which dynamically configures itself for the sort method. You'd need to iterate through all the OPTION values and test for whether they're a number or not - something like:
Code:
if isNAN($(this).val()*1) {
// this is text because multiplying text by 1 is Not A Number
}
else {
// this is still a number
}
Re: Sort Select list in numerical order
Hi!
Thanks alot for the reply thats very helpful :)
Is there away though that it can still do the numerical sort when it uses formatting like:
100,000
1,000,000
At the moment it sorts it like this:
1,000,000
100,000
when it should be:
100,000
1,000,000
When I remove the , it then sorts properly but is hard to read with lots of numbers
Many thanks
Joe
Re: Sort Select list in numerical order
Then your sort function will need to handle that. I've rewritten it to make it more readable:
Code:
if ( a.text === b.text ) return 0;
else {
if ( (a.text.replace(/,/g,""))*1 < (b.text.replace(/,/g,""))*1) return -1;
else return 1;
}