使用jQuery排序選擇框

我在窗體上有一個選擇框，它帶有增量rel屬性。我有一個函數，可以通過.text（）值，按字母順序排序選項。使用jQuery排序選擇框

我的問題是，用jQuery，我如何使用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>

我的排序函數：var object;可以是整個表單中多個選擇框中的一個。

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

});

來源

2012-03-27 Deano

如果要排序相對你應該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 
}));

來源

2012-03-27 10:27:13

如果rel總是要爲數字，你768,16'parseInt函數（）'它 - 否則訂單將咯' ，11,12,2,3,4 ...' – 2012-03-27 10:30:58

我將如何實現parseInt（）intot上述函數？ – Deano 2012-03-27 11:22:51

@Deano更新了答案 – 2012-03-27 11:24:14

可以使用.attr（）函數來獲取更改功能

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

編輯jQuery中的屬性值。有關更多信息，請參閱http://api.jquery.com/attr/。

試試這個：

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

});

來源

2012-03-27 10:28:11

試試這個。

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

來源

2012-03-27 10:50:14 Hearaman

我需要一個類似的解決方案，然後對原始函數進行了一些更改，它工作正常。

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

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

來源

2014-10-09 14:18:43

以供將來參考，接受的答案是不完整的，如果option有數據或道具（例如.prop('selected', true)）。在使用.html()後，它們將被刪除。

下面的功能可能不是最佳，但它的正常工作：

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

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

來源

2014-10-15 14:26:27

使用jQuery排序選擇框

回答

相關問題