Pole wyboru sortowania za pomocą jQuery

Question

Mam pole wyboru w formularzu, które przenosi przyrostowy atrybut rel. Mam funkcję, która może sortować opcje według ich wartości .text() w porządku alfabetycznym.

Moje pytanie brzmi, w jQuery, w jaki sposób sortować w kolejności rosnącej za pomocą atrybutu rel?

<option rel="1" value="ASHCHRC">Ashchurch for Tewkesbury </option> 
<option rel="2" value="EVESHAM">Evesham </option> 
<option rel="3" value="CHLTNHM">Cheltenham Spa </option> 
<option rel="4" value="PERSHOR">Pershore </option> 
<option rel="5" value="HONYBRN">Honeybourne </option> 
<option rel="6" value="MINMARS">Moreton-in-Marsh </option> 
<option rel="7" value="GLOSTER">Gloucester </option> 
<option rel="8" value="GTMLVRN">Great Malvern </option> 
<option rel="9" value="MLVRNLK">Malvern Link </option> 

Moja funkcja sortowania: obiekt var; może być jednym z wielu pól wyboru w całym formularzu.

$(object).each(function() { 

    // Keep track of the selected option. 
    var selectedValue = $(this).val(); 

    // sort it out 
    $(this).html($("option", $(this)).sort(function(a, b) { 
     return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
    })); 

    // Select one option. 
    $(this).val(selectedValue); 

}); 

Answer 1

Jeśli chcesz, aby posortować według rel powinien zmienić swoją funkcję

$(this).html($("option", $(this)).sort(function(a, b) { 
    var arel = $(a).attr('rel'); 
    var brel = $(b).attr('rel'); 
    return arel == brel ? 0 : arel < brel ? -1 : 1 
})); 

zmienił z parseInt()

$(this).html($("option", $(this)).sort(function(a, b) { 
    var arel = parseInt($(a).attr('rel'), 10); 
    var brel = parseInt($(b).attr('rel'), 10); 
    return arel == brel ? 0 : arel < brel ? -1 : 1 
})); 

Answer 2

można wykorzystać funkcję .attr(), aby uzyskać wartość atrybutu w jQuery. Aby uzyskać więcej informacji, patrz http://api.jquery.com/attr/.

Spróbuj tego:

$(object).each(function() { 

    // Keep track of the selected option. 
    var selectedValue = $(this).val(); 

    // sort it out 
    $(this).html($("option", $(this)).sort(function(a, b) { 
     var aRel = $(a).attr("rel"); 
     var bRel = $(b).attr("rel"); 
     return aRel == bRel ? 0 : aRel < bRel ? -1 : 1 
    })); 

    // Select one option. 
    $(this).val(selectedValue); 

}); 

Answer 3

Spróbuj tego.

 $(document).ready(function() 
     { 
      var myarray=new Array();    
      $("select option").each(function() 
      { 
       myarray.push({value:this.value, optiontext:$(this).text()}); 
      }); 

      myarray.sort(sortfun); 
      $newHmtl=""; 
      for(var i=0;i<myarray.length;i++) 
      { 

       $newHmtl+="<option rel='1' value='"+myarray[i]['value']+"'>"+myarray[i]['optiontext']+"</option>"; 
      } 
      $("select").html($newHmtl); 
     });    


     function sortfun(a,b) 
     { 
      a = a['value']; 
      b = b['value'];     
      return a == b ? 0 : (a < b ? -1 : 1) 
     } 

Answer 4

potrzebowałem podobne rozwiązanie następnie wprowadziła pewne zmiany do pierwotnej funkcji i to działało dobrze.

function NASort(a, b) { 
    return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1; 
}; 

$('select option').sort(NASort).appendTo('select'); 

Answer 5

Na przyszłość, przyjętą odpowiedź nie jest kompletna, jeśli option ma dane lub rekwizyty (np .prop('selected', true)). Zostaną one usunięte po użyciu .html().

Poniższa funkcja nie jest zoptymalizowana ale prawdopodobnie to działa poprawnie:

$.fn.sortChildren = function(selector, sortFunc) { 
    $(this) 
    .children(selector) 
    .detach() 
    .sort(sortFunc) 
    .appendTo($(this)); 
}; 

$('select').sortChildren('option', function(a, b) { 
    // sort impl 
});