Selección Cuadro de selección con jQuery

Question

Tengo un cuadro de selección en un formulario, que lleva un atributo rel incremental. Tengo una función que puede ordenar las opciones por su valor .text(), en orden alfabético.

Mi pregunta es, con jQuery, ¿cómo puedo ordenar en orden ascendente usando el atributo 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; puede ser uno de muchos cuadros de selección en todo el formulario.

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

Si desea ordenar por rel debe cambiar su función

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

edición con 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

Puede utilizar la función .attr() para obtener el valor de un atributo en jQuery. Vea http://api.jquery.com/attr/ para más información.

Prueba esto:

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

probar esto.

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

necesitaba una solución similar a continuación, hizo algunos cambios en la función original y funcionó bien.

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

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

Answer 5

Para referencia futura, la respuesta aceptada no es completa si option tiene datos o apoyos (por ejemplo .prop('selected', true)). Se eliminarán después de usar .html().

La función más adelante probablemente no está optimizado pero está trabajando correctamente:

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

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