如何使用 jquery 和 json 列表提供 3 个 html 选择？

Question

根据“地区”(html <select id="regioes">) 的组合选择，“程序”(html <select id="programas">) 食物或带有 Json (list-region-programs.json) 列表的组合框下方的 JS 代码。

但是我如何使用 Json 列表 combox-municipios.json 在“区域”中提供或组合框“基于组合”的城市 (html <select id="municipios">)？

选择 1 个程序 -> 提供区域 -> 选择 1 个区域 -> 提供“县”（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();
  });
});

Answer 1

好的... 3 html 使用 javascript 选择组合框下拉菜单

功能：选择地区（regioes）->完成程序（programas）->选择程序->完成城市（municipio）

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