Populate select cities according to status

Question

Populate select cities according to status

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello, I would like that when the user selects a state, the select is populated with the cities of that state so the user can select yours. I found a way to do where you do the registration of cities in the database, would you have some way to do this without putting those cities in the database, using just JavaScript? I thought of something style the viacep site, which is used for autocomplete address according to zip, but I could not find one that does this for cities and states only.

javascript

asked by anonymous 11.12.2017 / 13:26

2 answers

Api with Array of items does not receive the data posted A question about the toggle button

score 1 · Answer 1

Just one searched here and you will find several questions related to the subject, recently I left answer in question Check Availability of zip code , as you can see in the answer I left some examples.

Using the same code and only adapting according to your needs, 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>

score 1 · Answer 2

You can use the JSON and create a .js file with all cities in Brazil contained in it. Then just make an appointment 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 bit 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>