Jquery sort data in select [duplicate]

Question

I have written the following code which is working when there is alphabetic data, how can I make it work uniquely irrespective of alphabets or numbers

function sortList(selectId) {
  var options = $(selectId + ' option');
  var arr = options.map(function(_, o) {
    return {
      t: $(o).text(),
      v: o.value
    };
  }).get();
  arr.sort(function(o1, o2) {
    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
  });
  options.each(function(i, o) {
    o.value = arr[i].v;
    $(o).text(arr[i].t);
  });
}
$(document).ready(function() {
  sortList("#whatever");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='whatever'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='10'>10</option>
</select>

It is getting sorted as 1,10,2 where I am looking it like 1,2,10. How to make this function unique to work for all scenarios

Please revise your post title to ask a clear, specific question in sentence form. Don't tack on tags. See How to Ask. — isherwood
– isherwood, Commented Jan 12, 2022 at 13:43
arr.sort(function(o1, o2) { if (isNaN(o1.t) && isNaN(o2.t)) return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; return o1-o2; }); — mplungjan
– mplungjan, Commented Jan 12, 2022 at 13:53

BCT · Accepted Answer · 2022-01-14 17:20:45Z

0

This question is a duplicate of How can I sort elements by numerical value of data attribute?
Here's a snippet with the answer modified from that question to match this question

var element = $("#whatever");
element.find("option").sort(function(a, b) {
    return +a.getAttribute('value') - +b.getAttribute('value');
}).appendTo(element);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='whatever'>
    <option value='1'>1</option>
    <option value='6'>6</option>
    <option value='9'>9</option>
    <option value='3'>3</option>
    <option value='10'>10</option>
</select>

I just copied my snipped to your jsfiddle and it worked Here it is https://jsfiddle.net/g3cjbzey/

edited Jan 14, 2022 at 17:20

answered Jan 12, 2022 at 13:58

BCT

3231 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Developer Over a year ago

Hi can you look here and correct jsfiddle.net/DorababuMeka/u2tj9z7n

Developer Over a year ago

If I add <option value="156">0</option> after <option value="107">12</option> it didn't worked

BCT Over a year ago

Yes because it reads the value, not the text inside of it. You can change a.getAttribute('value') to Number(a.textContent). Same goes for b

Collectives™ on Stack Overflow

Jquery sort data in select [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related