4
I rode a select
through the JSON
below, the only problem is that it follows the order of the key, how to arrange it alphabetically?
{
"12": "Acre",
"27": "Alagoas",
"16": "Amapá",
"13": "Amazonas",
"29": "Bahia",
"23": "Ceará",
"53": "Distrito Federal",
"32": "Espírito Santo",
"52": "Goiás",
"21": "Maranhão",
"51": "Mato Grosso",
"50": "Mato Grosso do Sul",
"31": "Minas Gerais",
"15": "Pará",
"25": "Paraíba",
"41": "Paraná",
"26": "Pernambuco",
"22": "Piauí",
"33": "Rio de Janeiro",
"24": "Rio Grande do Norte",
"43": "Rio Grande do Sul",
"11": "Rondônia",
"14": "Roraima",
"42": "Santa Catarina",
"35": "São Paulo",
"28": "Sergipe",
"17": "Tocantins"
}
$(document).ready(function() {
$.getJSON("/estados.json", function(estados) {
$.each(estados, function(codigo, nome) {
$('select#estado').append($('<option>').text(nome).attr('value', codigo));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="estado" name="estado" class="form-control input">
<option value="">Selecione o Estado</option>
</select>
But your list is already in alphabetical order, anyway, if you have access do it in the backend.
– Rafael Berro
Yes, the list is in alphabetical order but when mounting select it automatically sorts by
key
and not byvalue
.– Marcelo de Andrade
The alternatives presented are good, but this does not work. From the point of view of UX, you will have much more result for your experience, if you put a digitable field, which can suggest options based on the first characters inserted. In that case the order would be irrelevant, because he will need to insert at least A to see Acre Alagoas, Amapá. You’ll understand this better if you think of a broader way where you have a result with all cities of a state for example, and you can sort by ABC .. so that the person can find an option, and not objectively, for them to find
– David Augustus