-
October 31st, 2013, 06:40 AM
#1
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
-
November 6th, 2013, 04:41 AM
#2
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
}
-
November 6th, 2013, 06:04 AM
#3
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
-
November 6th, 2013, 08:22 AM
#4
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;
}
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|