JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<select class="slc_Reuniao">
    <option value="SP" selected>São Paulo</option>  
    <option value='RJ'>Rio de Janeiro</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='MG'>Minas Gerais</option>
    <option value='ES'>Espirito Santo</option>
    <option value='PE'>Pernanbuco</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>

JavaScript

$( 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 option');
         console.log(options);
    var arr = selects[n].option.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);
    });
        
    }

 });