fsantos
-
Total de itens
1 -
Registro em
-
Última visita
Sobre fsantos
-
Como formar select option através de um json com multiplos niveis
fsantos postou um tópico no fórum Javascript
tenho o seguinte codigo e queria uma ajuda para fazer a iteração correta no arquivo json <!DOCTYPE html> <html> <head> <title>Mapa</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{margin:0 auto; width:480px; font-family: arial;} input.text, textarea, select { border: 1px solid #C0C0BA; -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17); -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17); box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17); } input, textarea, select { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } @media only screen and (max-width: 600px) { body { width:90%; } } </style> <script type="text/javascript" src="https://fcosantos.com.br/js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $.getJSON('https://fcosantos.com.br/projetos/covidForm/portugal.json', function (data) { var items = []; var options = '<option value="">Escolha o distrito</option>'; $.each(data, function (key, val) { options += '<option value="' + val.nome + '">' + val.nome + '</option>'; }); $("#estados").html(options); $("#estados").change(function () { var options_cidades = ''; var str = ""; $("#estados option:selected").each(function () { str += $(this).text(); }); $.each(data, function (key, val) { if(val.nome == str) { options_cidades += '<option value="">Escolha o conselho</option>'; $.each(val.cidades, function (key_city, val_city) { options_cidades += '<option value="' + val_city.nome + '">' + val_city.nome + '</option>'; }); } }); $("#cidades").html(options_cidades); //Busca das freguesias $("#cidades").change(function () { var options_freguesias = ''; var str2 = ""; $("#cidades option:selected").each(function () { str2 += $(this).text(); }); $.each(data, function (key2, val2) { if(val2.cidades.nome == str2) { options_freguesias += '<option value="">Escolha a freguesia</option>'; $.each(val2.cidades.freguesias, function (key_freg, val_freg) { options_freguesias += '<option value="' + val_freg.nome + '">' + val_freg.nome + '</option>'; }); } }); $("#freguesias").html(options_freguesias); }).change(); }).change(); }); }); </script> </head> <body> <form method="get" action=""> <select name="uf" id="estados" style="width:47%; padding:5px; margin-bottom:8px; float:left;"> <option value=""></option> </select> <select name="cid" id="cidades" style="width:47%; padding:5px; margin-bottom:8px; float:right;"> </select> <select name="freg" id="freguesias" style="width:100%; padding:5px; margin-bottom:8px;"> </select> <input type="submit" value="Buscar" style="width:100%; padding:5px; margin-bottom:20px; "> </form> </body> </html> O que ocorre é que ao selecionar o primeiro select o segundo é preenchido altomaticamente, mais nao entendi porque o segundo não.