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 alh
      Olá Pessoal,
       
      Tenho um script em javascript do mercado livre, que é um botão que vem no formato de script, o código que vou postar abaixo é o script, que ao ser inserido dentro do site vira um botão de "Comprar".

      Preciso fazer com que este botão se inicie automáticamente sem ser clicado pode ser em PHP ou Javascript o comando!!
       
      <script    src="https://www.mercadopago.com.br/integrations/v1/web-payment-checkout.js"    data-preference-id="<?php echo $preference2->id; ?>" data-elements-color="#0D55E7"  data-button-label-color="#0D55E7"    data-button-label="CONTINUAR" >   </script>  
    • By Giovanird
      Olá a todos!

      Abaixo lista minha estrutura em Json. Há grupos que faltam um objeto (TIPO) e ao listar recebo o erro  por não encontrá-lo.
      Existe alguma maneira de verificar se este objeto existe e caso não, ignorar?

      Desde já agradeço a atenção.

       
      ESTUTURA JSON: [ { “titulo”: “JSON”, “data”: “20/10/2020”, “ano”: 2020, “tipo”: novo }, { “titulo”: “HTML”, “data”: “20/10/2020”, “ano”: 2020, “tipo”: usado }, { “titulo”: “PHP”, “data”: “20/10/2020”, “ano”: 2020 } ] CAPTURANDO OS DADOS: $titulo = $decode->titulo; $data = $decode->data; $ano = $decode->ano; $tipo = $decode->tipo;  
       
    • By MarcosAntonio
      boa tarde. 
      Estou precisando de um Select que retorne uma soma que ao chegar a determinado valor ela reinicie e continue fazendo sucessivamente
       select   pedido,   volume,   limite,   SUM(volume) over (order by pedido ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) saldo   from pedidos  group by pedido o select está retornando assim porém quero que toda vez que chegue ou passe do limite resete o saldo, por exemplo parar no 100 que é o limite e começar um novo saldo
      pedido     volume    limite    saldo  1             70            100        70  2             10            100        80  3             20            100        100  4             50            100        150  5             30            100        180  
      preciso que ele soma o volume enquanto o saldo seja <= que o "limite", quando passar pare de somar e comece outra soma começando do 0, como no exemplo abaixo.
      pedido    volume    limite    saldo  1             70            100        70  2             10            100        80  3             20            100        100  4             50            100        50  5             30            100        80  
    • By daviassumpcao
      Pessoal... estou iniciando estudos em JS e me deparei com um desafio: Preciso tratar um valor (string) para obter apenas número...  a primeira variável retorna NAN, as outras retornam corretamente. O que posso estar fazendo errado na variável "a" ... preciso que seja retornado "299,00" ... agradeço antecipadamente. 
       
      Segue código: 
       
      <p id="demo"></p> <script> var a = parseInt("R$ 299,00") + "<br>"; var b = parseInt("40 years") + "<br>"; var c = parseInt("10.00") + "<br>"; var n = a + b + c; document.getElementById("demo").innerHTML = n; </script>  
    • By violin101
      Caros amigos, saudações...
       
      Tenho uma rotina para mostrar ao usuário todos os produtos Relacionados com um determinado Produto.
       
      Exemplo:
      Caderno ---> relacionado com: lápis, borracha, caneta, apontador e etc.
       
      O problema que estou enfrentando é o seguinte:
      ==> o produto caderno se estiver relacionado com mais de 4 produtos não ocorre o erro.
       
      Quando mostro o relacionamento se o produto estiver relacionado com apenas 3 ou menos produto, o CAROUSEL fica repetindo o 1º ou 2º item.
       
      Como faço para isso não acontecer ?
       
      Abaixo posto como está o JavaScript.
      $(".produto_relaciona").owlCarousel({ loop: true, nav: true, items: 4, dots: false, navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], smartSpeed: 1200, autoplayTimeout: 5000, autoHeight: false, autoplay: true, responsive: { 0: { items: 1 }, 480: { items: 2 }, 768: { items: 3 }, 992: { items: 4 } } });  
       
      Grato,
       
      Cesar
×

Important Information

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