www.webdeveloper.com
Results 1 to 6 of 6

Thread: Sort Select list in numerical order

  1. #1
    Join Date
    Oct 2013
    Posts
    8

    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
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
    body{padding-top:250px;text-align:center;}
    </style>
    <script>
    function doc(id){return document.getElementById(id);}
    function doCompare(a,b){return a-b;}
    window.onload=function(){
    var nums=['150','200','50','1058,34'],str='<h3>Input: '+nums.join('; ');
    var newnums=nums.sort(doCompare);
    doc('res').innerHTML=str+'<br />Output: '+newnums.join('; ')+'</h3>';
    }
    </script>
    </head>
    <body>
    <div id="res"></div>
    </body>
    </html>

  3. #3
    Join Date
    Oct 2013
    Posts
    8
    Hi,

    I forgot to mention that the select list is taken from a database so there are loads more numbers than just 150, 200, 50

    Thanks for the reply though

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    it doesn't matter how long the list is

  5. #5
    Join Date
    Oct 2013
    Posts
    8
    ah i see. I don't understand how you would apply that to a select list that is populated by a MySQL table though?

    Thanks for your help

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Quote Originally Posted by jmd87 View Post
    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);
        });
    }
    Try this out:

    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) {
                var valueA = Number(a.text), valueB = Number(b.text);
    
                if (valueA < valueB) {
                    return -1;
                }
                else if (valueA > valueB) {
                    return 1;
                }
                else {
                    return 0;
                }
            }));
     
            // Select one option.
            $(this).val(selectedValue);
        });
    }
    If you convert the string text to a number, and then do the comparison you should get the correct sort order. This will only work for numeric strings though. If you have a mix of numbers and letters in each OPTION, you'll still need to do a string comparison.

    Also, the return values for the sort method really should be -1, 1 and 0 (zero being both A and B are equal).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles