Jump to content
Eli Lopes

Como faço para alimentar 3 select html dropdwon com javascript e listas json?

Recommended Posts

O código em JS abaixo alimenta o combobox "programas" (html <select id="programas">) com uma lista em Json (lista-regiao-programas.json) de acordo com a escolha no combo "regioes" (html <select id="regioes">).

 

Mas como eu faço para alimentar o combobox "municípios" (html <select id="municipios">) baseado no combo em "regiões" com a lista Json "combox-municipios.json" ?

 

esolhe 1 programa -> alimenta regiões -> escolhe 1 região -> alimenta "município" (3 select dropdwon em cascata / aninhados)...

 

HTML ->

<div class="form-group">
  <!-- dropdown Regiões -->
  <label for="regioes">Região de integração</label>
  <select id="regioes">
    <option value=""></option>
  </select>
</div>
		
<div class="form-group">
  <!-- dropdown Programas -->
  <label for="programas">Programa desenvolvido</label>
  <select id="programas"></select>
</div>

JS JSON ->

$(document).ready(function(){
  $.getJSON('SIGPLAM2/javaScript/lista-regiao-programas.json', function(data){
	var items = [];
	var options = '<option value="">escolha uma região</option>';

    $.each(data, function(key, val){
	  options += '<option value="' + val.nome + '">' + val.nome + '</option>';
	});

    $("#regioes").html(options);
	$("#regioes").change(function(){
	  var options_programas = '';
	  var str = "";

	  $("#regioes 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_programas += '<option value="' + val_city + '">' + val_city + '</option>';
		  });
		}
	  });
					
	  $("#programas").html(options_programas);

	}).change();
  });
});

 

Share this post


Link to post
Share on other sites
Em 30/09/2019 at 14:05, Eli Lopes disse:

Escolhe 1 programa -> alimenta regiões -> escolhe 1 região -> alimenta "município" (3 select dropdwon em cascata / aninhados)...


Achei a resposta...

function get_json_data(id, parent_id) {
  var html_code = '';

  $.getJSON('SIGPLAM4/javaScript/lista-regiao-programas-municipio.json', function(data){
    ListName = id;  // ID do select regioes
    html_code += '<option value="">Selecione a ' + ListName + '</option>';
    
    $.each(data, function(key, value) {
      if (value.parent_id == parent_id) {
        html_code += '<option value="' + value.id + '">' + value.name + '</option>';
      }
    });
    $('#' + id).html(html_code);
  });
}
get_json_data('regioes',0);

$(document).on('change', '#regioes', function(){
  var regioes_id = $(this).val();

  if (regioes_id != ''){
    get_json_data('programas', regioes_id);
    get_json_data('municipio', category_id);
    get_json_data('municipioSuas', category_id);
    get_json_data('municipioVig', category_id);
  } else {
    $('#programas').html('<option value="">Selecione o programa</option>');
  }
});

$(document).on('change', '#programas', function(){
  var category_id = $(this).val();
  if (category_id != '') {
    get_json_data('municipio', category_id);
    get_json_data('municipioSuas', category_id);
    get_json_data('municipioVig', category_id);
  } else {
    $('#municipio').html('<option value="">Selecione o municipio</option>');
    $('#municipioSuas').html('<option value="">Selecione o municipio SUAS</option>');
    $('#municipioVig').html('<option value="">Selecione o municipio VIG</option>');
  }
});

 

Share this post


Link to post
Share on other sites

A função da resposta acima está com problema na parte:

 

html_code += '<option value="' + value.id + '">' + value.name + '</option>';

Está salvando um número no mysql. E se mudar o "value.id" a função para de funcionar.

 

Então, consegui a solução unindo dois procedimentos (getjson + método barroco switch case)

 

Ao escolher no select "regioes" alimenta o select "programas" com getjson:

$(document).ready(function(){
   $.getJSON('javaScript/lista-regiao-programas.json', function(data){
      var items = [];
      var options = '<option value="">escolha um estado</option>';
      $.each(data, function(key, val){
         options += '<option value="' + val.nome + '">' + val.nome + '</option>';
      });
         $("#regioes").html(options);
	      $("#regioes").change(function(){
         var options_cidades = '';
         var str = "";
	         $("#regioes 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>';
               });
            }
         });
      
         $("#programas").html(options_cidades);
      }).change();
   });
});

 

Também ao escolher no select "regioes" alimenta o select "municipio" com switch case arcaico:

function dynamicdropdown(listindex)
{
  switch (listindex)
  {
  case "Araguaia" :
    document.getElementById("municipio").options[0]=new Option("Selecione o município","");
    document.getElementById("municipio").options[1]=new Option("Conceição do Araguaia","Conceição do Araguaia");
    document.getElementById("municipio").options[2]=new Option("Floresta do Araguaia","Floresta do Araguaia");
    document.getElementById("municipio").options[3]=new Option("Santa Maria das Barreiras","Santa Maria das Barreiras");
    document.getElementById("municipio").options[4]=new Option("Santana do Araguaia","Santana do Araguaia");
    break;
  case "Baixo Amazonas" :
    document.getElementById("municipio").options[0]=new Option("Selecione o município","");
    document.getElementById("municipio").options[1]=new Option("Município 1","Município 1");
    document.getElementById("municipio").options[2]=new Option("Município 2","Município 2");
    break;
  }
  return true;
}

O form select html:

<label for="regioes">Região de integração</label>
<select name="regioes" id="regioes" class="form-control" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
      <option value="">Selecione a regição</option>
</select>
	 
	<label for="programas">Programa desenvolvido</label>
<select name="programas" id="programas" class="form-control">
     <option value="">Selecione o programa</option>
</select>

<label for="municipio">Município de atuação</label>
<select name="municipio" id="municipio">
        <option value="">Selecione o municipio</option>
</select>

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 eduh.castro19
      Olá,boa noite a todos.
      Estou com um problema e já não sei como arrumar, toda vez que uso o a função =
       
      $json = file_get_contents('http://localhost/arquivo1.php'); $obj = json_decode($json); echo $obj->nome;  
      Ele me retorna um erro = ( Trying to get property 'name' of non-object in )
      Tenho 3 arquivos (Conexão.php,Arquivo1.php,Arquivo2.php)
      Eles estão assim:
       
      Arquivo1 =
      require('conexão.php'); while ($row = $usuarios->fetch(PDO::FETCH_ASSOC)) {      $nomex = $row['nome'];      $datax = $row['data'];       $encoda= array('nome' => $nomex, 'data' => $datax );     echo json_encode($encoda);} Arquivo2 =
      $json = file_get_contents('http://localhost/arquivo1.php'); $obj = json_decode($json); echo $obj->nome; echo json_last_error_msg(); O erro acontece no Arquivo2
      Já tentei por HTTP HEADER JSON Mas não adiantou,não sei mais o que fazer,se alguem puder ajudar. Agradecerei demais! Boa noite a todos.
       
       
       
    • By renan mafra
      Olá pesssoal,

      Sou novato em JS.
      Eu tenho 6 links, que são imagens que quero substituir, uma pela outra.
      Eu sei que poderia fazer isso facilmente via CSS, mas para treinar quero fazer da seguinte forma:

      Minha ideia seria pegar o src das imagens e alterar mudando o nome da imagem, tipo assim:
      Tenho imagens que são os links nomeados assim:    carro.png / carro-B.png (uma imagem(link) é branca e a outra é amarela).

      Como faço para alterar a imagem trocando uma pela outra nesse esquema ?
      <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>
      e trocar para
      <a href="#"><img src="links/carro-B.png" name="menu0" width="90" height="13" border="0"/></a>
       
      Como são 6 imagens eu estou pegando via getElementsByTagName e depois fazer uma função que automatize para todas as outras.....
      Tirando o CSS HOVER via Javascript, essa seria a melhor maneira de automatizar essa troca ?

      vai lá o código:
       
      <html> <head> <style> body{background-color: #000000;} </style> <script> window.onload = function(){ var menu0 = document.getElementsByName("menu0"); var imagem = menu0[0].src; ////////////////////////////////////////////// //bloco que vai varrer cada item: //////////// //for(var i=0; i<menu0.length; i++){ // alert(menu0[i].src); //} ////////////////////////////////////////////// } </script> </head> <body> <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/livro.png" name="menu0" width="86" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/aviao.png" name="menu0" width="109" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/motos.png" name="menu0" width="108" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/bicicleta.png" name="menu0" width="114" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/onibus.png" name="menu0" width="114" height="13" border="0"/></a> </body> </html> a imagem carro.png tem o seu respectivo carro-B.png
                        aviao.png                                        aviao-B.png
       
      E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ?
       
    • By granderodeo
      Olá tenho a página index.php e tenho a página product.php, ao clicar no produto na página inicial, quero que redirecione para página product.php mostrando os dados do determinado produto que cliquei, iniciei o código mais não está dando certo, Obrigado.
       
      index.php
      <?php if (is_array($products)) { foreach ($products as $id => $row) { ?> <div class="col-sm-6 col-md-4 col-lg-3 mb-2"> <div class="card-deck"> <div class="card p-2 border-secondary mb-2"> <a href="product.php?id=<?= $row['product_id'] ?>"> <div class="hover-image"> <img class="card-img-top border-secondary" src="images/<?= $row['product_image'] ?>"/> <a href="#"><span class="texto"></span></a> </div> </a> <h3 class="text-center"><?= $row['product_name'] ?></h3> <div class="text-center text-black rounded p-1" style="font-size: 20px;">Valor&nbsp;$<?= $row['product_price'] ?></div> <button class="btn btn-success btn-block" type="button" value="Add to cart" onclick="cart.add(<?= $row['product_id'] ?>);">Adicionar ao carrinho</button> </div> </div> </div> <?php } } else { echo "No products found."; } ?>  
      product.php
      <?php $products = $_GET["product_id"]; if (is_array($products)) { foreach ($products as $id => $row) { }}; $row['product_name'] ?>  
    • By 3agdeu
      Bom dia a todos.

      Quero saber se alguns dos sábios participantes saberia um forma que capturar um informação (constantemente atualizada) apresentada em uma aplicação java na tela. São os dados de variação de ações, nos respectivos sites de operações. Geralmente aparecem em um canto fixo ou ficam em um elemento que flutua sobre o gráfico da ação (penso que rodem em java).

      Posso interceptar e interpretar os sinais enviados ao monitor?

      Posso interceptar as atualizações da maquina java e/ou o script?

      Existe um programa para fazer a leitura de uma determinada parte da tela que fica constantemente se atualizando?

      Obrigado.
    • By ChuChun
      Estou começando a mexer com progromação, estive fazendo um algoritmo de física, mas, quando pedi para que fossem coletados os campos para fazer assim a equação, não da certo, este é o código da parte que estou com dificuldade:

       
      $("#btn1").click(function(){ var comprimento = parseFloat($("#comprimento").val()); var espiras = parseFloat($("#espiras").val()); var no = parseFloat($("#no").val()); var multpi = parseFloat($("#multpi").val()); var pi = parseFloat($("#pi").val()); var amperes = parseFloat($("#amperes").val()); var valor = parseFloat($("#valor").val()); var resultado = (var multpi = parseFloat($("#multpi").val() * var pi = parseFloat($("#pi").val()) * parseFloat($("#no").val()) * (parseFloat($("#espiras").val()) * parseFloat($("#comprimento").val()) )* parseFloat($("#amperes").val());  
×

Important Information

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