Em um formulário de um site, tive a necessidade de ter 2 campos select com Estado e Municípios. O funcionamento seria: exibir o select dos estados preenchidos e após selecionar o estado, o select de municípios apareceria com os municípios do estado relacionado.
Encontrei uma API confiável do IBGE: https://servicodados.ibge.gov.br/api/docs/localidades
Lista de Estados: https://servicodados.ibge.gov.br/api/v1/localidades/estados/
Lista dos municípios da Bahia: https://servicodados.ibge.gov.br/api/v1/localidades/estados/35/municipios
Um trecho do código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$.getJSON('https://servicodados.ibge.gov.br/api/v1/localidades/estados/', {id: 10, }, function (json) { var options = '<option value="">– –</option>'; for (var i = 0; i < json.length; i++) { options += '<option data-id="' + json[i].id + '" value="' + json[i].nome + '" >' + json[i].nome + '</option>'; } $("select[name='estado']").html(options); }); $("select[name='estado']").change(function () { if ($(this).val()) { $.getJSON('https://servicodados.ibge.gov.br/api/v1/localidades/estados/'+$(this).find("option:selected").attr('data-id')+'/municipios', {id: $(this).find("option:selected").attr('data-id')}, function (json) { var options = '<option value="">– –</option>'; for (var i = 0; i < json.length; i++) { options += '<option value="' + json[i].nome + '" >' + json[i].nome + '</option>'; } $("select[name='cidade']").html(options); }); } else { $("select[name='cidade']").html('<option value="">– –</option>'); } }); |
Postou no github como ficou no final?