Sort Select Options by Value Attribute Using jQuery

Question

Well, the title says it all. What I am doing is creating a featured product module. The drop down list of sizes is populated using JSON and I am using handlebars to render the html. I do not have control over the JSON file. I tried sorting the option values by the actual text within the option tags, but I realized that the option values were wrong after that. So now I am trying to sort the options by their value attributes, but haven't figured it out yet. I am trying to do something like this:

var selectList = $('#featuredSelectField option');
var newList = [];
var theNewNew = [];
for(var i=0; i<selectList.length; i++){
    newList[i]=(selectList[i].value);    
}
newList.sort();
for(var i=0; i<newList.length; i++){
    theNewNew[i] = $('#featuredSelectField option[value="'+newList[i]+'"]');
    selectList[i] = theNewNew[i];
}

and here is the html:

<select id="featuredSelectField" name="addid7617843" size="1">
    <option value="" data-value="">Select an option</option>
    <option value="10493640" data-value="10493640" data-qty="30" data-mxqty="30">Size 5.5 - $111.99</option>
    <option value="10493639" data-value="10493639" data-qty="120" data-mxqty="50">Size 5 - $111.99</option>
    <option style="display: none;" disabled="disabled" value="10792504" data-value="10792504" data-qty="0" data-mxqty="0">Size 10 - $111.99 Sold Out</option>
    <option value="10493644" data-value="10493644" data-qty="138" data-mxqty="50">Size 7 - $111.99</option>
    <option value="10493642" data-value="10493642" data-qty="22" data-mxqty="22">Size 6.5 - $111.99</option>                
    <option value="10493641" data-value="10493641" data-qty="57" data-mxqty="50">Size 6 - $111.99</option>              
    <option value="10493648" data-value="10493648" data-qty="99" data-mxqty="50">Size 9 - $111.99</option>      
    <option value="10493647" data-value="10493647" data-qty="28" data-mxqty="28">Size 8.5 - $111.99</option>                
    <option value="10493646" data-value="10493646" data-qty="74" data-mxqty="50">Size 8 - $111.99</option>                  
    <option value="11288830" data-value="11288830" data-qty="1" data-mxqty="1">Size 4.5 - $111.99</option>
    <option value="10493645" data-value="10493645" data-qty="51" data-mxqty="50">Size 7.5 - $111.99</option>                    
    <option value="10792503" data-value="10792503" data-qty="5" data-mxqty="5">Size 9.5 - $111.99</option>
    <option value="11288831" data-value="11288831" data-qty="6" data-mxqty="6">Size 4 - $111.99</option>
</select>

Just realized that the values for the two smallest sizes, 4 and 4.5, are much higher than the rest. — pizzarob, Dec 19 '13 at 23:19
Are you able to manipulate the JS objects based on the JSON after you receive it but before it gets turned into HTML? — Cᴏʀʏ, Dec 19 '13 at 23:20

score 42 · Accepted Answer · edited Sep 02 '14 at 15:56

42

var selectList = $('#featuredSelectField option');

selectList.sort(function(a,b){
    a = a.value;
    b = b.value;

    return a-b;
});

$('#featuredSelectField').html(selectList);

Here you cand find a demo and compare the results with the original: http://jsfiddle.net/74c2M/3/

Here you can find the proper code: http://jsfiddle.net/74c2M/4/

Good luck !

edited Sep 02 '14 at 15:56

Philipp

15,377
4
35
52

answered Dec 19 '13 at 23:58

NeoHQ

791
6
6

4

change the last line from: $('select').html(selectList); to: $('featuredSelectField ').html(selectList); ... just in case there are more than one selectbox on the page – Biman Tripathy Jun 17 '14 at 06:49
1

Size 4 is at the bottom 5 at the top 9 in the middle – Sven van den Boogaart Jan 09 '16 at 08:55

score 4 · Answer 2 · answered Dec 01 '18 at 06:12

$(function() {
  // choose target dropdown
  var select = $('select');
  select.html(select.find('option').sort(function(x, y) {
    // to change to descending order switch "<" for ">"
    return $(x).text() > $(y).text() ? 1 : -1;
  }));

  // select default item after sorting (first item)
  // $('select').get(0).selectedIndex = 0;
});

Roko C. Buljan · Answer 3 · 2020-09-24T20:19:32.490

const sort = (arr, p, o = "asc") => arr.sort((a, b) => {
  if (o !== "asc")[a, b] = [b, a];
  const isNum = typeof b[p] === "number";
  return (isNum ? Number(a[p]) - b[p] : String(a[p]).localeCompare(b[p]));
});


$.fn.sortChildren = function(op) {
  op = $.extend({
    by: "textContent",
    order: "asc"
  }, op);
  return this.each(function() {
    const i = $(this).prop("selectedIndex");
    $(this).html(sort($(this).children(), op.by, op.order)).prop({selectedIndex: i});
  });
};


// 1. example: sorting by value, order "asc" (default)
$("#test_1").sortChildren({by: "value"});

// 2. example: sorting by textContent (default), order "desc"
$("#test_2").sortChildren({order: "desc"});

<select id="test_1">
  <option value="0.1">dolor</option>
  <option value="a">sit</option>
  <option value="-1">Lorem</option>
  <option value="0">ipsum</option>
  <option value="A">amet</option>
</select>

<ul id="test_2">
  <li>z</li>
  <li>-20</li>
  <li>ab</li>
  <li>100</li>
  <li>1</li>
  <li>00</li>
  <li>10</li>
  <li>Ab</li>
  <li>0.1</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Sort Select Options by Value Attribute Using jQuery

3 Answers3

Linked

Related