Jump to content
Márvin Edge

Select no form html não está puxando dados do json através de uma função no javascript

Recommended Posts

cidade_bairro.jsonBom dia galera, to quebrando a cabeça aqui e não sei o que tá acontecendo, coloquei em um arquivo json as cidades e os bairros delas, e escrevi um código javascript para puxar os dados e preencher o select do formulário em html, mas o select não exibe nada.

 

Código javascript

<script type="text/javascript">    
    
        
        $(document).ready(function () {
                            
                            $.getJSON('cidade_bairro.json', function (data) { alert(JSON.(data))

                                var items = [];
                var options = '<option value="">Escolha uma cidade</option>';    

                $.each(!data, function (key, val) {
                    options == '<option value="' + val.nome + '">' + val.nome + '</option>';
                });                    
                $("#cidades").html(options);                
                
                $("#cidades").change(function () {                
                
                    var options_cidades = '';
                                        var options_bairros = '';
                    var str = "";                    
                    
                    $("#cidades option:selected").each(function () {
                        str += $(this).text();
                    });
                    
                    $.each(data, function (key, val) {
                        if(val.nome == str) {                            
                            $.each(val.cidades, function (key_city, val_city) {
                                options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
                            });                            
                        }
                    });
                                }).change();
                                    
                                $("#bairros").html(options);
                                
                                $("#bairros").change(function () {
                                            
                    $("#bairros option:selected").each(function () {
                                            str += $(this).text();
                                        });
                                        
                                        $.each(data, function (key, val) {
                                            if(val.nome == str) {
                                                $.each(val.bairros, function (key_neighborhood, val_neighborhood){
                                                    options_bairros += '<option value="' + val_neighborhood +'">' + val_neighborhood + '</option>';
                                                });
                                            }
                                        });
                    
                }).change();        
            
            });
        
        });
        
    </script>

 

Código html

 

<body>

<form>
        
        <!-- Cidade -->
        <select id="cidades">
            <option value=""></option>
        </select>
                <!-- Bairros -->
        <select id="bairros">
                    <option value=""></option>
        </select>
    
</form>

</body>

 

Desde já obrigado

cidade_bairro.json

index.html

Share this post


Link to post
Share on other sites

Olá...

 

Esta linha está errada: 

options == '<option value="' + val.nome + '">' + val.nome + '</option>';

Você está usando um comparador (==) quando deveria usar um concatenador (+=).

Dessa maneira a variável "options" irá receber apenas "false". Use assim:

options += '<option value="' + val.nome + '">' + val.nome + '</option>';

 

Share this post


Link to post
Share on other sites

É importante conhecer a estrutura do seu objeto json.

Precisamos conhecer esta estrutura, pois pode haver uma falha na leitura dos dados.

Veja um exemplo que fiz:

 

http://codepen.io/Eziquiel/pen/RpyENX?editors=0010

 

Esta á a estrutura do objeto json:

https://gist.githubusercontent.com/letanure/3012978/raw/36fc21d9e2fc45c078e0e0e07cce3c81965db8f9/estados-cidades.json

  • +1 1

Share this post


Link to post
Share on other sites

Cara agora foi até engraçado, eu coloquei o arquivo json em um site hospedado alterei a url no codigo fiz o teste e nada, ai tentei copiar exatamente o seu código e colar no codepen do meu, o seu exibe o meu não, kkkkkkkkkkkk

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Robson Augusto
      Boa noite, sera que alguém poderia me dar uma luz!? 
      Vamos lá, a situação é a seguinte, tenho um site classificados que criei a pouco tempo, está com problemas de rastreamento das páginas dos itens postados (anúncios), ou seja, o search console do Google, acusa anomalia nao identificada ao rastrear páginas dos anúncios, e não esta indexando estas páginas. O que poderia ser? Eu utilizo o osclass como plataforma principal do site. Se alguém quiser mais alguma informação que possa ser útil... Obrigado 
    • By EdPaulino
      Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no  computador, o que deve-se fazer pra forçar-lo a se adaptar?
       
      segue codigo:
       
      <!--
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu RESPONSIVO</title>
          
          <!---<link rel="stylesheet" href="style.css">-->
      </head>
          <style>
              *{
                  margin: 0;
                  padding: 0;
               }
              
              .menu{
                  width: 100%;
                  height: 50px;
                  background-color: #f0f0f0;
                  font-family:'Arial';
              }
              .menu ul{
                  list-style:none;
                  position: relative;
              }
              .menu ul li{
                  width: 150px;
                  float: left;
              }
              .menu ul ul{
                  position: absolute;
                  visibility: hidden; 
              }
              
              .menu ul li:hover ul{
                  visibility: visible;
                  display:block;
              }
              .menu a{
                  text-decoration: none;
                  display: block;
                  padding: 15px;
                  text-align: center;
                  background-color: #f6f6f6;
                  color: #000;
              }
              .menu a:hover{
                  background-color: #f4f4f4;
              }

              .menu ul ul li{
                      float: none;
                      border-bottom: 1px solid #000;
              }
              .menu ul ul li a{
                      background-color: #f0f0f0;
              }
              label[for="bt_menu"]{
                          padding: 5px;
                          background-color: #d0d0d0;
                          font-family: 'Arial';
                          text-align: center;
                          font-size: 30px;
                          width: 50px;
                          height: 50px;
              }
              
              #bt_menu{
                  display: none ;
              }    
              label[for="bt_menu"]{
                          display: none;        
              }
          @media (max-width: 800px){
                  label[for="bt_menu"]{
                          display:block;
                          margin-left: 0;        
                  }
                  #bt_menu:checked ~ .menu{
                      margin-left: 0;
                      display: block;
                  }    
                  
                  .menu{
                      margin-top:5px;
                      margin-left: -100%;
                      transition: all .4s
                  }
                  .menu ul li{
                      width:100%;
                      float: none;
                  }
                  .menu ul ul{
                      position:static;
                      overflow: hidden;
                      max-height: 0;
                      transition: all 2s;
                  }
                  .menu ul li:hover ul{
                      height:auto;
                      max-height: 200px;
                  }
                          
          }    
          </style>
      <body>
          <input type="checkbox" id="bt_menu">
          <label for="bt_menu">&#9776;</label>
                 <nav class="menu">
                      <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Serviços</a>
                  <ul>
                  <li><a href="#">Criação de Sites</a></li>
                  <li><a href="#">Artes Visuais</a></li>
                  </ul>
              </li>
              <li><a href="#">Cursos</a>
                  <ul>
                  <li><a href="#">Java</a></li>
                  <li><a href="#">Photoshop</a></li>
                  <li><a href="#">HTML/CSS</a></li>
                  </ul>
              </li>
              <li><a href="#">Contato</a></li>
              </ul>
                  </nav>
      </body>
      </html>
       
      --->

    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.