EDITION
In the future, someone needs the jQuery version. Here is the code:
//select encadeado com JSON
$('#uf').on('change', function () {
var estado = $(this).val(), cidade = $('#municipio');
$.getJSON('json/municipios.json', function (resultado) {
$.each(resultado, function (estadoProp, valor) {
cidade.find('option').remove();
if (estadoProp === estado) {
for (var i in valor) {
var cidadeVal = valor[i];
cidade.append($("<option></option>").attr("value", cidadeVal).text(cidadeVal));
}
/* Esta parte aqui é por conta do plugin Bootstrap Select que eu estou usando. Obviamente, não é necessária se você não usa o plugin */
cidade.selectpicker('refresh');
}
});
});
});
I have a question about using the Chained Select plugin.
I have a combo box HTML with the Brazilian states, like this:
<select id="estado">
<option value="">Selecione</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espirito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MT">Mato Grosso</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
I would like to select the state and immediately have the municipalities of that state listed in another combo box from a JSON file.
The plugin is called as follows and is working, but does not bring the data correctly, as can be seen in the JSFiddle .
$("#municipio").remoteChained({
parents : "#estado",
url : "https://gist.githubusercontent.com/eduardo-almeida-II/6e1caf8875949b38a68c/raw/5b1ede8cd5bc1959a8b02b21fcc02f576eb4ef4a/municipios.json"
});
The problem, I think, should be in the format as the JSON file is (which can be seen here ).
What should be the JSON format?