JavaScript Sort Select list in numerical order
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4

Thread: Sort Select list in numerical order

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    4

    Question 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

  2. #2
    Join Date
    Jun 2009
    Posts
    86

    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:
    Code:
     return a-b;
    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
    }

  3. #3
    Join Date
    Oct 2013
    Posts
    4

    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

  4. #4
    Join Date
    Jun 2009
    Posts
    86

    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
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center