Fill select cities according to status

Question

Hello, I would like that when the user selects a state, the select be filled with the cities of that state so that the user can select his. I found a way to do where you register cities in the database, would there be any way to do that without putting these cities in the database, using only Javascript? I thought of something like the site viacep, which is used for automatic address filling according to the zip code, but I couldn’t find one that does this for cities and states only.

Answer 1

You can use JSON of this Github and create an archive .js with all the cities of Brazil contained in it. Then just make a query and list the cities by the acronym of the State.

In the example below I put only 2 States as an example, because the list of cities is a little extensive:

// ESTE SERIA O CONTEÚDO DO .js
var json_cidades = {
  "estados": [
    {
      "sigla": "AC",
      "nome": "Acre",
      "cidades": [
        "Acrelândia",
        "Assis Brasil",
        "Brasiléia",
        "Bujari",
        "Capixaba",
        "Cruzeiro do Sul",
        "Epitaciolândia",
        "Feijó",
        "Jordão",
        "Mâncio Lima",
        "Manoel Urbano",
        "Marechal Thaumaturgo",
        "Plácido de Castro",
        "Porto Acre",
        "Porto Walter",
        "Rio Branco",
        "Rodrigues Alves",
        "Santa Rosa do Purus",
        "Sena Madureira",
        "Senador Guiomard",
        "Tarauacá",
        "Xapuri"
      ]
    },
    {
      "sigla": "AL",
      "nome": "Alagoas",
      "cidades": [
        "Água Branca",
        "Anadia",
        "Arapiraca",
        "Atalaia",
        "Barra de Santo Antônio",
        "Barra de São Miguel",
        "Batalha",
        "Belém",
        "Belo Monte",
        "Boca da Mata",
        "Branquinha",
        "Cacimbinhas",
        "Cajueiro",
        "Campestre",
        "Campo Alegre",
        "Campo Grande",
        "Canapi",
        "Capela",
        "Carneiros",
        "Chã Preta",
        "Coité do Nóia",
        "Colônia Leopoldina",
        "Coqueiro Seco",
        "Coruripe",
        "Craíbas",
        "Delmiro Gouveia",
        "Dois Riachos",
        "Estrela de Alagoas",
        "Feira Grande",
        "Feliz Deserto",
        "Flexeiras",
        "Girau do Ponciano",
        "Ibateguara",
        "Igaci",
        "Igreja Nova",
        "Inhapi",
        "Jacaré dos Homens",
        "Jacuípe",
        "Japaratinga",
        "Jaramataia",
        "Jequiá da Praia",
        "Joaquim Gomes",
        "Jundiá",
        "Junqueiro",
        "Lagoa da Canoa",
        "Limoeiro de Anadia",
        "Maceió",
        "Major Isidoro",
        "Mar Vermelho",
        "Maragogi",
        "Maravilha",
        "Marechal Deodoro",
        "Maribondo",
        "Mata Grande",
        "Matriz de Camaragibe",
        "Messias",
        "Minador do Negrão",
        "Monteirópolis",
        "Murici",
        "Novo Lino",
        "Olho d'Água das Flores",
        "Olho d'Água do Casado",
        "Olho d'Água Grande",
        "Olivença",
        "Ouro Branco",
        "Palestina",
        "Palmeira dos Índios",
        "Pão de Açúcar",
        "Pariconha",
        "Paripueira",
        "Passo de Camaragibe",
        "Paulo Jacinto",
        "Penedo",
        "Piaçabuçu",
        "Pilar",
        "Pindoba",
        "Piranhas",
        "Poço das Trincheiras",
        "Porto Calvo",
        "Porto de Pedras",
        "Porto Real do Colégio",
        "Quebrangulo",
        "Rio Largo",
        "Roteiro",
        "Santa Luzia do Norte",
        "Santana do Ipanema",
        "Santana do Mundaú",
        "São Brás",
        "São José da Laje",
        "São José da Tapera",
        "São Luís do Quitunde",
        "São Miguel dos Campos",
        "São Miguel dos Milagres",
        "São Sebastião",
        "Satuba",
        "Senador Rui Palmeira",
        "Tanque d'Arca",
        "Taquarana",
        "Teotônio Vilela",
        "Traipu",
        "União dos Palmares",
        "Viçosa"
      ]
    }
  ]
};
// FIM DO .js

function buscaCidades(e){
   document.querySelector("#cidade").innerHTML = '';
   var cidade_select = document.querySelector("#cidade");

   var num_estados = json_cidades.estados.length;
   var j_index = -1;

   // aqui eu pego o index do Estado dentro do JSON
   for(var x=0;x<num_estados;x++){
      if(json_cidades.estados[x].sigla == e){
         j_index = x;
      }
   }

   if(j_index != -1){
  
      // aqui eu percorro todas as cidades e crio os OPTIONS
      json_cidades.estados[j_index].cidades.forEach(function(cidade){
         var cid_opts = document.createElement('option');
         cid_opts.setAttribute('value',cidade)
         cid_opts.innerHTML = cidade;
         cidade_select.appendChild(cid_opts);
      });
   }else{
      document.querySelector("#cidade").innerHTML = '';
   }
}

<select id="estado" onchange="buscaCidades(this.value)">
   <option value="">Selecione o Estado</option>
   <option value="AC">Acre</option>
   <option value="AL">Alagoas</option>
</select>
<br />
<select id="cidade">
</select>

Answer 2

Just a searched here and you will find several questions related to the subject, recently I left this reply in the question Check Availability of CEP, as you can see in the reply I left some examples.

Using the same code and only adapting as your need, you get the result:

const INPUT_CIDADE = document.querySelector('#cidade');
const INPUT_ESTADO = document.querySelector('#estado');

const buscarCEP = (cep) => {
  let check = false;
  if (cep.length < 8) return;
  let url = 'https://viacep.com.br/ws/${cep}/json/'.replace('${cep}', cep);
  fetch(url)
    .then((res) => {
    if (res.ok) {
      res.json().then((json) => {
        if (!json.erro) {
          let cidade = json.localidade;
          let estado = json.uf;
          // Preenche os campos
          INPUT_CIDADE.value = cidade;
          INPUT_ESTADO.value = estado;
        }
      });
    }
  });
}

let btnVerificarCEP = document.querySelector('#VerificarCEP');
// Adiciona o evento click
btnVerificarCEP.addEventListener('click', function(e) {
  let campoCEP = document.querySelector('#cep');
  buscarCEP(campoCEP.value);
});

.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
}

<div class="form-group">
  <label for="cidade">Cidade</label>
  <input type="text" id="cidade" readonly disabled />
</div>
<div class="form-group">
  <label for="cidade">Estado</label>
  <input type="text" id="estado" readonly disabled />
</div>
<div class="form-group">
  <label for="cep">CEP</label>
  <input type="text" name="cep" id="cep" placeholder="Informe um CEP" value="13454422" />
  <input type="button" id="VerificarCEP" value="Verificar" />
</div>