Good Morning I'm trying to make this example in my project. It is a simple change of Select when you choose State Changes the Cities in another Select.
But I can not get the variable, estados_cidades.json .
I tried to script as% <script id="estados_cidades.json" src="GerenciaTI/Scripts/estados_cidades.json" ></script>
But it does not bring data by Jquery
I am doing in JSP pages, what error did I make?
Or if you have a better way to do this.
Follow the example working ...
$(document).ready(function () {
$.getJSON('https://gist.githubusercontent.com/ografael/2037135/raw/5d31e7baaddd0d599b64c3ec04827fc244333447/estados_cidades.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>';
});
$("#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) {
$.each(val.cidades, function (key_city, val_city) {
options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
});
}
});
$("#cidades").html(options_cidades);
}).change();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<body>
<form>
<!-- Estado -->
<select id="estados">
<option value=""></option>
</select>
<select id="cidades">
</select>
</form>
</body>
</html>