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 combos aninhados)...

HTML ->

2. <div class="form-group">  
3. <!-- dropdown Regiões -->
4.   <label for="regioes">Região de integração</label>
5.   <select id="regioes">
6.     <option value=""></option>
7.   </select>
8. </div>
10. <div class="form-group">
11.   <!-- dropdown Programas -->
12.   <label for="programas">Programa desenvolvido</label>
13.   <select id="programas">
14. </select>
15.   </div>

JS JSON ->

2. $(document).ready(function(){
3.   $.getJSON('SIGPLAM2/javaScript/lista-regiao-programas.json', function(data){
4. var items = [];
5. var options = '<option value="">escolha uma região</option>';
6. 
   
7.     $.each(data, function(key, val){
8.   options += '<option value="' + val.nome + '">' + val.nome + '</option>';
9. });
10. 
    
11.     $("#regioes").html(options);
12. $("#regioes").change(function(){
13.   var options_programas = '';
14.   var str = "";
15. 
    
16.   $("#regioes option:selected").each(function(){
17. str += $(this).text();
18.   });
19. 
    
20.   $.each(data, function(key, val){
21. if(val.nome == str){
22.   $.each(val.cidades, function(key_city, val_city){
23. options_programas += '<option value="' + val_city + '">' + val_city + '</option>';
24.   });
25. }
26.   });
28.   $("#programas").html(options_programas);
29. 
    
30. }).change();
31.   });
32. });