it-swarm.com.de

Sortieren Wählen Sie Optionen nach Wertattribut mit jQuery aus

Nun, der Titel sagt alles. Was ich mache, ist das Erstellen eines vorgestellten Produktmoduls. Die Dropdown-Liste der Größen wird mit JSON aufgefüllt, und ich verwende den Lenker zum Rendern der HTML-Datei. Ich habe keine Kontrolle über die JSON-Datei. Ich habe versucht, die Optionswerte nach dem tatsächlichen Text innerhalb der Option-Tags zu sortieren, erkannte jedoch, dass die Optionswerte danach falsch waren. Also versuche ich jetzt, die Optionen nach ihren Wertattributen zu sortieren, habe es aber noch nicht herausgefunden. Ich versuche so etwas zu tun:

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];
}

und hier ist das 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>
12
pizza-r0b
var selectList = $('#featuredSelectField option');

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

    return a-b;
});

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

Hier finden Sie eine Demo und vergleichen die Ergebnisse mit dem Original: http://jsfiddle.net/74c2M/3/

Hier finden Sie den richtigen Code: http://jsfiddle.net/74c2M/4/

Viel Glück !

33
NeoHQ
$(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;
});
0
Ankit Lakum