Sortieren, Wählen Sie Optionen von Value-Attribut Mit jQuery

Gut, der Titel sagt alles. Was ich mache, ist die Schaffung eines Produkt-Modul. Die drop-down-Liste der Größen ist gefüllt mit JSON und ich bin mit LENKER zum Rendern des html-Codes. Ich habe keine Kontrolle über die JSON-Datei. Ich habe versucht, die Sortierung der Optionswerte durch den eigentlichen text innerhalb des option-tags, aber ich merkte, dass die option, die Werte waren falsch nach. So jetzt versuche ich zu Sortieren die Optionen durch Ihre value-Attribute, aber haben nicht herausgefunden noch. 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 die 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>
Gerade festgestellt, dass die Werte für die beiden kleinsten Größen 4 und 4.5, sind viel höher als der rest.
Sind Sie in der Lage zu manipulieren die JS-Objekte auf Basis der JSON-nachdem Sie es erhalten aber bevor es gedreht wird in HTML?

InformationsquelleAutor pizza-r0b | 2013-12-19

  1. 33
    var selectList = $('#featuredSelectField option');

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

    return a-b;
});

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

    Hier cand finden Sie ein demo auf und vergleichen das Ergebnis mit dem original:
    http://jsfiddle.net/74c2M/3/

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

    Glück !

    ändern Sie die Letzte Zeile aus: $('select').html(selectList); zu: $('featuredSelectField ').html(selectList); ... nur für den Fall gibt es mehr als eine selectbox auf der Seite
    Größe 4 ist an der Unterseite 5 auf der Oberseite 9 in der Mitte

    InformationsquelleAutor NeoHQ

  2. 0
    $(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;
});

    InformationsquelleAutor Ankit Lakum

Schreibe einen Kommentar