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

[Eli Lopes 0]

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();
  });
});

 

[Eli Lopes 0]

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>');
  }
});

 

[Eli Lopes 0]

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>