如何使用js中的符号对列表进行排序

Question

I have a drop down with a list of options which looks like this:

<select id="weightClass" class="form-control input-sm">
     <option value="Default">Please Select</option>
     <option>200</option>
     <option>&lt;200</option>
     <option>&gt;200</option>
     <option>Unknown</option>
</select>

I'm trying to sort them in a custom order so it looks like this:

<select id="weightClass" class="form-control input-sm">
     <option value="Default">Please Select</option>
     <option> <200 </option>
     <option> 200 </option>
     <option> >200 </option>
     <option>Unknown</option>
</select>

Basically arranging it so that the less than option comes first, then the standard, then greater than, then unknown.

This is dynamically generated, the values could be anything, but there is always 4, and always in that format. Always including an unknown, >, < and standard value.

My current code is:

function sortDropDown(target) {
    $(target).html($(target + " option").sort(function (a, b) {
        return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
    }));
}

Which obviously doesnt work, any ideas how i could get around this, can't seem to find anything about sorting with > < symbols included.

Answer 1

Extract the text (exclude the 1st one), sort and swap out the text using the sorted array

With HTML

<select id="weightClass" class="form-control input-sm">
    <option value="Default">Please Select</option>
    <option>&lt;200</option>
    <option>&gt;200</option>
    <option>200</option>
    <option>Unknown</option>
</select>

you can use this script ( after the above HTML)

var sortOrder = {
    '<': 1,
    // placeholder for the value
    '>': 3,
    'U': 4
}

function sortDropDown(target) {
    // get text
    var opts = [];
    $(target + " option").each(function (i) {
        if (i)
            opts.push($(this).text())
    });

    opts.sort(function (a, b) {
        // get the sort order using the first character
        var oa = sortOrder[a[0]] || 2;
        var ob = sortOrder[b[0]] || 2;
        if (oa > ob)
            return 1;
        else if (oa < ob)
            return -1;
        else
            return 0;
    });

    // change the option text
    $(target + " option").each(function (i) {
        if (i)
            $(this).text(opts[i - 1])
    });
}

sortDropDown("#weightClass")

 var sortOrder = { '<': 1, '>': 3, 'U': 4 } function sortDropDown(target) { var opts = []; $(target + " option").each(function (i) { if (i) opts.push($(this).text()) }); console.log(opts) opts.sort(function (a, b) { var oa = sortOrder[a[0]] || 2; var ob = sortOrder[b[0]] || 2; if (oa > ob) return 1; else if (oa < ob) return -1; else return 0; }); $(target + " option").each(function (i) { if (i) $(this).text(opts[i - 1]) }); } sortDropDown("#weightClass") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="weightClass" class="form-control input-sm"> <option value="Default">Please Select</option> <option>&lt;200</option> <option>&gt;200</option> <option>200</option> <option>Unknown</option> </select> 

Answer 2

You should use a sorting function to do the special sort that you need.
Here is the sorting function with an example of how to use it:

var t = ['some other option', '100', '120', '300', '>300', '<300', '<100', '>400', '200', '<200', '>200', 'another special option']
function specialSort(a, b) {
    var newA, newB;
    if (a[0] == '<' || a[0] == '>') {
        newA = parseInt(a.substr(1))
    } else if (!isNaN(a)) {
        newA = parseInt(a)
    } else {
        newA = null;
    }

    if (b[0] == '<' || b[0] == '>') {
        newB = parseInt(b.substr(1))
    } else if (!isNaN(b)) {
        newB = parseInt(b)
    } else {
        newB = null;
    }

    if (newA == null) {
        return 1;
    }
    if (newB == null) {
        return -1;
    }

    if (typeof(newA) == 'number' && typeof(newB) == 'number') {
        if (newA < newB) {
            return -1;
        } else if (newA > newB) {
            return 1;
        } else if (newA == newB) {
            if (a[0] == '<') {
                return -1;
            } else if (b[0] == '<') {
                return 1;
            } else if (a[0] == '>') {
                return 1
            } else if (b[0] == '>' ) {
                return -1;
            }
        }
    }
    return 0;
}
console.log(t.sort(specialSort));
// Output is ["<100", "100", "120", "<200", "200", ">200", "<300", "300", ">300", ">400", "another special option", "some other option"]

You can use jQuery to get the values of your SELECT tag and sort them using this:

valuesToSort = []
$('#weightClass').find('option').each(function(){r.push($(this).text())})
valuesToSort.sort(specialSort)

Now the array valuesToSort is sorted the way you want and you can put the values back into your #weightClass tag.