jQuery로 선택 상자 정렬

Question

양식에 증분 rel 특성을 갖는 선택 상자가 있습니다. 나는 옵션을 알파벳순으로 정렬 할 수있는 함수를 가지고있다.

제 질문은 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> 

my sort function : 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); 

}); 

Answer 1

당신은 당신이 당신은을 얻기 위해 .attr() 함수를 사용할 수

$(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()로 함수

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

편집을 변경해야합니다 REL 정렬 기준으로 사용할 경우 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); 

}); 

Answer 3

이보십시오.

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

비슷한 해결책이 필요했지만 원래 기능에 약간의 변경이 필요했습니다. option는 데이터 나 소품 (예를 들어, .prop('selected', true))가있는 경우 나중에 참조 할 수 있도록

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

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

Answer 5

은 허용 대답이 완료되지 않았습니다. .html()을 사용하면 제거됩니다.

아래의 기능은 아마 최적화되지 않고 올바르게 작동하고 :

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

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