How To Sort A List With Symbols In Js

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

Solution 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>

Solution 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.

Share

Top Question

Sending A Canvas.toDataUrl() To Php Via AJAX

I am trying to send a canvas.toDataUrl() to a php page via …

How To Access Add-on Content Script In Firefox Console?

I have developed an add-on for Firefox and Chrome. It has c…

Arrow Key Pressed While Shift Key Is Held Down

I have a Sudoku puzzle and I want to make it so the user ca…

FakePath Issue In Chrome Browser

I am making a browser based audio player. So for making a p…

TextRange Selection MSIE

I can easily set the selection on 2+ elements programatical…

Set Click Event On Leaf Node

i have this type of html :- Activities Physical1 …

Assigning An Increment Value To Dynamic Fields

I have dynamic input fields generated from a jquery functio…

Angularjs Auto Prefixes Forward Slash

If I hit the url say www.xyz.com/home#route-1 AngularJS au…

Get And Update Text Every Few Seconds From An Http Source To An Https Website

So, I have a radio station, my host provider does not have …

Window.Open With PDF Stream Instead Of PDF Location

Based on the question Open PDF in new browser full window, …

• November 2024 (32)
• October 2024 (52)
• September 2024 (19)
• August 2024 (208)
• July 2024 (189)
• June 2024 (409)
• May 2024 (687)
• April 2024 (422)
• March 2024 (793)
• February 2024 (904)
• January 2024 (781)
• December 2023 (809)
• November 2023 (341)
• October 2023 (517)
• September 2023 (275)
• August 2023 (335)
• July 2023 (277)
• June 2023 (371)
• May 2023 (206)
• April 2023 (127)
• March 2023 (137)
• February 2023 (182)
• January 2023 (243)
• December 2022 (121)
• November 2022 (237)
• October 2022 (172)
• September 2022 (165)
• August 2022 (505)
• July 2022 (300)
• June 2022 (284)

Menu Halaman Statis

• Beranda

© 2022 - JavaScript Square