Sıralama Seçme kutusu jQuery

Question

Artımlı rel özniteliği taşıyan bir formda seçim kutusu var. Seçenekleri .text() değerine göre alfabetik sıraya göre sıralayabilen bir işlev var.

Soruma göre jQuery ile rel özniteliğini kullanarak artan bir sırada nasıl sıralayabilirim?

<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> 

Sıralama işlevim: var object; Form boyunca birçok seçme kutudan biri olabilir.

$(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

Eğer sen almak için .attr() işlevini kullanabilirsiniz

$(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

parseInt() ile fonksiyon

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

düzenlemeyi değişmelidir rel göre sıralamak istiyorsanız jQuery'de bir özniteliğin değeri. Daha fazla bilgi için bkz. http://api.jquery.com/attr/.

bu deneyin:

$(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

bu deneyin.

 $(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

Benzer bir çözüme ihtiyacım vardı, ardından özgün işlevde bazı değişiklikler yaptım ve iyi çalıştı. option veri veya sahne (ör .prop('selected', true)) varsa İleride

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

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

Answer 5

kabul yanıt tam değildir. .html() kullandıktan sonra kaldırılacaklar.

aşağıda fonksiyon muhtemelen optimize edilmediği ancak Düzgün çalışan:

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

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