Как я могу кормить 3 html select списками jquery и json? - PullRequest
Новая
       7

Как я могу кормить 3 html select списками jquery и json?

0 голосов
/ 14 октября 2019

Код JS ниже «программирует» (html <select id="programas">) поля со списком еды или списки со списком в Json (list-region-programs.json) в соответствии с выбором комбинации «регионов» (html <select id="regioes">).

Но как мне кормить или комбинировать списковые "комбо" муниципалитеты (html <select id="municipios">) в "регионах" со списком Json combox-municipios.json?

выбрать 1 программу -> регионы подачи -> выбрать 1region -> feed "county" (3 вложенных комбо).

HTML 

<div class="form-group">
  <!-- dropdown Regiões -->
  <label for="regioes">Região</label>
  <select id="regioes">
    <option value=""></option>
  </select>
</div>
		
<div class="form-group">
  <!-- dropdown Programas -->
  <label for="programas">Programa </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();
  });
});

1 Ответ

0 голосов
/ 24 октября 2019

Хорошо ... 3 html выберите выпадающий список со списком javascript

Функция: Выберите регион (регионы) -> завершить программу (программы) -> выбрать программу -> весь город (муниципалитет) 

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