3

Estou precisando ordenar um select em ordem alfabética.

Tentei utilizar esta função que achei na internet

function ordenarSelect(){   
    f$(".slc_Reuniao").html($("option", $(".slc_Reuniao")).sort(function(a,b){
        return a.text == b.text  ? 0 : a.text < b.text ? -1 : 1;
    }));
};

Meu select inicial é:

 <select class="slc_Reuniao">
    <option value="SO" selected>--</option>             
 </select>

Apos rodo uma função que adiciona dinamicamente com append os nomes que voltaram da query. Preciso ordená-los.

Porem não está funcionando, ao contrario ele está gerando é novos options, estou utilizando IndexedDB como banco ele é baseado também em javascript, tentei procurar algo que no momento em que estou pesquisando os dados no banco eu ordena-se como no próprio sql porém não achei nada a respeito. Como devo fazer isto ?

Em uma mesma página tenho 3 select cujo conteúdo é igual.

Select gerando ao fazer o que me indicaram

A forma de implementação é quando clico em um menu localizado em um sidemenu, dispara um evento que descrevo abaixo.

    $(document).on("click", "#cadReu", function(evt)
{
    var w_codigo_turma = sessionStorage.getItem('codigo');
    carregaSelectAluno(w_codigo_turma);
    ordenarSelect();
    activate_page("#cadastro_REUNIAO");
});

Apos ele chama a função carregarSelectAluno(), não irei adicionar pelo tamanho mais a função dele é apenas criar os <option value""></option> e adicionar no campo onde pego pelo comando $wrapper = document.querySelector('.slc_Reuniao'); e coloco no select desta forma

   $( ".slc_Reuniao" ).each(function() {
      $(this).append(HTMLNovo);
    }); 

Apos isto chamo a função ordenarSelect() que é o local onde estou colocando as funções indicada pelas respostas da minha pergunta. Ambas dicas está dando mesmo problema. Não está organizando e está regerando. Um problema eu identifiquei que é quando volto ele adiciona novamente os nomes.

3 Respostas 3

6

Você pode extrair os valores de cada option em um array, ordenar os valores e após, atualizar seu select. Ficaria assim o seu código:

$( document ).ready(function() {   
    var n;
    var selects = $('select.slc_Reuniao');
  //console.log(selects);
    for(n = 0; n < selects.length; n++){
      var options = $('select.slc_Reuniao:eq('+n+') option');
       //console.log(opt);
      var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
  

}
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="slc_Reuniao">
    <option value='PA'>Para</option>
    <option value='BA'>Bahia</option>
    <option value='MG'>Minas Gerais</option>
    <option value='ES'>Espirito Santo</option>
    <option value='PE'>Pernanbuco</option>
 </select>

 <select class="slc_Reuniao">
    <option value="SP">São Paulo</option>  
    <option value='RJ'>Rio de Janeiro</option>
    <option value='TO'>Tocantins</option>
    <option value="AC">Acre</option>  
    <option value='BA'>Bahia</option>
 </select>

 <select class="slc_Reuniao">
    <option value='BA'>Bahia</option>
    <option value="AC">Acre</option>  
    <option value='TO'>Tocantins</option>
    <option value='SC'>Santa Catarina</option>
    <option value='PA'>Para</option>
 </select>

Edit

Para ordenar ao carregar a página, basta você colocar a função dentro do $ (Document) .ready () que ele chamará a função assim que sua página estiver pronta. Ficaria assim o código.

$( document ).ready(function() {   
    var n;
    var selects = $('select.slc_Reuniao');
  //console.log(selects);
    for(n = 0; n < selects.length; n++){
      var options = $('select.slc_Reuniao:eq('+n+') option');
       //console.log(opt);
      var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });


}
 });

Veja um exemplo no JSFiddle.

Fonte: Sorting Options - SOen.

8
  • Queria algo dinâmico, que não fosse necessário adicionar eventos a clicks, Commented 25/09/2015 às 12:11
  • Editei a resposta, veja se lhe ajuda
    – Randrade
    Commented 25/09/2015 às 12:34
  • Meu amigo, o metodo indicado para você está dando algo interessante, quando vou na pagina ele realiza apenas 4 mudanças, se eu saio e entro na pagina ele faz com todos os options do select porem ele bloqueia 3 select anteriores e o ultimo somente que fica funcionando. no log deu o seguinte resultado.` Montagem dos selects concluido com sucesso. main.js:29 0 1 2 3 Montagem dos selects concluido com sucesso. main.js:29 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ` Commented 25/09/2015 às 13:05
  • Eu não entendi as edições de sua pergunta. Você possui vários select's e quer ordenar todos ao acessar à página, ou quer ordenar após alguma interação, ou ambas as opções?
    – Randrade
    Commented 25/09/2015 às 13:09
  • Não, preciso ordenar todos os select ao acessar a pagina, na verdade eu monto ele desordenado e quero ordenar e mandar para pagina. Commented 25/09/2015 às 13:13
3

Tente o seguinte:

var options = $('select.whatever option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
  o.value = arr[i].v;
  $(o).text(arr[i].t);
});

Exemplo: http://jsfiddle.net/Pointy/trELD/

4
  • Este método não funcionou. Commented 25/09/2015 às 12:19
  • Como vc está implementando? Commented 25/09/2015 às 12:30
  • editei minha pergunta veja la Commented 25/09/2015 às 12:46
  • Faça o seguinte, primeiro inclua as options desordenadas e depois rode a função que passei no meu exemplo Commented 25/09/2015 às 13:07
2

Use está função para ordenar seu select

function ordenarSelect(id_componente)
{
  var selectToSort = jQuery('#' + id_componente);
  var optionActual = selectToSort.val();
  selectToSort.html(selectToSort.children('option').sort(function (a, b) {
    return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
  })).val(optionActual);
}




$(document).ready(function () {
  ordenarSelect('idMeuSelect');
});

Exemplo:

function ordenarSelect(id_componente)
    {
      var selectToSort = jQuery('#' + id_componente);
      var optionActual = selectToSort.val();
      selectToSort.html(selectToSort.children('option').sort(function (a, b) {
        return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
      })).val(optionActual);
    }
    $(document).ready(function () {
      ordenarSelect('meuSelect');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <select id="meuSelect">
    <option>Maria</option>
    <option>Pedro</option>
    <option>Zico</option>
    <option>Ana</option>
     <option>---</option>
    <option>Paulo</option>
  </select>

2
  • Este método não funcionou. Commented 25/09/2015 às 12:18
  • Adicionei um exemplo, observe que está funcionando. Qualquer duvida só pedir. Obrigado. Commented 25/09/2015 às 12:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .