How to fill in a "select" input based on the selection of another select?

Asked

Viewed 55 times

2

In this my code I select the state and it shows the cities of the selected state in another element select, i wanted to put one more neighborhood option, where I first select the state input, then the city input and then the neighborhood input..

// 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 id="bairro">
</select>

javascript html
  • 1

    hello Eúbulo, just follow the same logic that already has, need to separate in the object the neighborhoods, for example like this: "cidades": [&#xA; "Água Branca": { "Bairros": [ "bairro1", ...] }. Then just filter the neighborhoods by the name of the city, so does state/city. Tip: here on the site have great questions about how to filter an object using for example filter, that will make your code smaller and simpler

1 answer

1


Here is a suggestion to solve your problem...

// ESTE SERIA O CONTEÚDO DO .js
    var json_cidades = {
    "estados": [
        {
            "sigla": "AC",
            "nome": "Acre",
            "cidades": [
                {
                    "nome" : "Acrelândia",
                    "bairros" : [
                        {
                            "nome" : "bairro 1"
                        },           
                        {
                            "nome" : "bairro 2"
                        }
                    ]
                },
                {
                    "nome" : "Assis Brasil",
                    "bairros" : [
                        {
                            "nome" : "bairro 3"
                        },
                        {
                            "nome" : "bairro 4"
                        }
                    ]
                }
            ]
        },
        {
            "sigla": "AL",
            "nome": "Alagoas",
            "cidades": [
                {
                    "nome" : "Água Branca",
                    "bairros" : [
                        {
                            "nome" : "bairro 5"
                        },
                        {
                            "nome" : "bairro 6"
                        }
                    ]
                },
                {
                    "nome" : "Anadia",
                    "bairros" : [
                        {
                            "nome" : "bairro 7"
                        },
                        {
                            "nome" : "bairro 8"
                        }
                    ]
                },
                {
                    "nome" : "Arapiraca", 
                    "bairros" : [
                        {
                            "nome" : "bairro 9"
                        },
                        {
                            "nome" : "bairro 10"
                        }
                    ]
                }
            ]
        }
    ]
}
    // FIM DO .js

    function buscaCidades(e){
       document.querySelector("#cidade").innerHTML = '';
       document.querySelector("#bairro").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.nome)
             cid_opts.innerHTML = cidade.nome;
             cidade_select.appendChild(cid_opts);
          });
       }else{
          document.querySelector("#cidade").innerHTML = '';
       }
    }
    
    
    function buscaBairros(e){
       document.querySelector("#bairro").innerHTML = '';
       var bairro_select = document.querySelector("#bairro");
       var select = document.getElementById('estado');
       var estadoValor = select.options[select.selectedIndex].value;
       var numEstado = -1;

       var num_estados = json_cidades.estados.length;
       var i_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 == estadoValor){
             var numCidades = json_cidades.estados[x].cidades.length;
             for(var y = 0; y < numCidades; y++) {
                if(json_cidades.estados[x].cidades[y].nome == e){
                numEstado = x
                  i_index = y;
                }
             }
          }          
       }

       if(i_index != -1){
      
          // aqui eu percorro todas as cidades e crio os OPTIONS
          json_cidades.estados[numEstado].cidades[i_index].bairros.forEach(function(bairro){
             var cid_opts = document.createElement('option');
             cid_opts.setAttribute('value',bairro.nome)
             cid_opts.innerHTML = bairro.nome;
             bairro_select.appendChild(cid_opts);
          });
       }else{
          document.querySelector("#bairro").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" onchange="buscaBairros(this.value)">
    </select>
    <br />
    <select id="bairro">
    </select>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.