0

I'm currently using a dropdown-menu where the user can select an application version (e.g. 1.0.4.3-0001) to get more information on this specific version. To let the user find the correct version faster I want to sort this dropdown-menu so that the latest version is on top and the lowest version (1.0.0.0-0001) is at the bottom. Because all versions are getting fetched from a server and new ones can appear every day, I cannot sort them by hand.

I tried various jQuery and JavaScript codes to sort it right, but none of the codes seem to work with decimals like application versions (because it thinks 1.0.2.0 is newer than 1.0.12.0 for example). Does anyone know how to work with such a specific case?

Just in case anyone wants to see the code I've tried so far (with 'version' being my dropdown):

$("#version").html($("#version option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

Many thanks in advance.

Sorcer
  • 5
  • 4
  • 2
    [**How to compare software version number using js**](http://stackoverflow.com/questions/6832596/how-to-compare-software-version-number-using-js-only-number) – adeneo Jul 07 '14 at 15:19
  • Hm, all of the snippets posted there are just about comparing two specific versions, not sorting them the right way... – Sorcer Jul 07 '14 at 15:24
  • @Sorcer that's what the sort function does though, compares a to b – Andrew Walters Jul 07 '14 at 15:37
  • I agree with you that - in order to sort something - you have to compare something. But I have no clue on how to continue with the snippets that compare two specific versions. Any idea on that? :) – Sorcer Jul 07 '14 at 15:51

1 Answers1

0

Try converting the text to an array of values and comparing those.

Here's a jsfiddle.

Its contents are thus:

Body

<select>
    <option>1.0.2.0</option>
    <option>1.0.12.0</option>
    <option>0.1.2.3</option>
</select>

Init javascript

$('select option').sort(
    function (compA,compB)
    {
        var a = compA.text.split(/[.-]/).map(function(x){return parseFloat(x)});
        var b = compB.text.split(/[.-]/).map(function(x){return parseFloat(x)});

        var i;
        for (i=0; i < a.length && i < b.length; ++i)
        {
            if (a[i] < b[i])
                return -1;
            else if (a[i] > b[i])
                return 1;
        }

        if (a.length != b.length)
        {
            if (i == a.length)
                return -1;
            if (i == b.length)
                return 1;
        }

        return 0;
    })
.each(function(i,a){$('select').prepend(a)});

That .each at the bottom reverses the .sort result.

ca2longoria
  • 362
  • 1
  • 3
  • 12
  • I'm sorry I have to push this topic, but something on my website has changed. The select options aren't loaded by PHP anymore, now they get inserted by jQuery (with `.appendTo()`). Unfortunately your script doesn't seem to work with jQuery inserted options, any idea on how to fix that? :) – Sorcer Jul 10 '14 at 10:29
  • I just found a fix myself. The problem is not that the select options were inserted by jQuery, I just tried to sort it too fast after letting jQuery inserting the options. So I just call the function to sort the versions about 250ms later, this works just fine. – Sorcer Jul 10 '14 at 10:43