Ordering select in alfábetica order with jQuery

Question

I need to order a select alphabetically.

I tried to use this function I found on the 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;
    }));
};

My initial select is:

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

I run a function that adds dynamically with append the names that came back from query. I must order them.

However it is not working, on the contrary it is generating new options, am using IndexedDB as database it is also based on javascript, I tried to search for something that at the moment I am searching the data in the database I sort itself as in the sql but I couldn’t find anything about it. How should I do this ?

On the same page I have 3 select whose content is equal.

The implementation way is when I click on a menu located in a sidemenu, triggers an event that I describe below.

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

After it calls the function carregarSelectAluno(), I won’t add by size but its function is just to create the <option value""></option> and add in the field where caught by the command $wrapper = document.querySelector('.slc_Reuniao'); and put in select this way

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

After this I call the function ordenarSelect() which is where I am placing the functions indicated by the answers to my question. Both tips are giving same problem. It is not organizing and it is conducting. A problem I identified that is when I return it adds the names again.

Answer 1

You can extract the values from each option in a array, order the values and after, update your select. That would be your code:

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

To sort when loading the page, just put the function inside the $ (Document) . ready () that it will call the function as soon as your page is ready. That would be the code.

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


}
 });

See an example in Jsfiddle.

Source: Sorting Options - Soen.

Answer 2

Try the following:

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

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

Answer 3

Use this function to sort your 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');
});

Example:

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>