LucianoCharlesdeSouza/cidades-por-estado.html

## cidades-por-estado.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cidade por Estado</title>
  </head>
  <body>

    <select name="estados" id="estados"></select>
    <select name="cidades" id="cidades" disabled="disabled"></select>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function () {

        $.ajax({
          url: 'https://servicodados.ibge.gov.br/api/v1/localidades/estados',
          method: 'GET',
          dataType: 'json',
          success: function (response) {

            let estados = response.sort(function (a, b) {
              if (a.nome > b.nome) {
                return 1;
              }
              if (a.nome < b.nome) {
                return -1;
              }
              return 0;
            });

            let estadosHtml = '';
            for (estado of estados) {
              estadosHtml += `<option value="${estado.id}">${estado.nome}</option>`;
            }

            $('select[name="estados"]').html(estadosHtml);
          }
        });

        $('select[name="estados"]').change(function () {

          let id = $(this).val();

          $.ajax({
            url: `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${id}/municipios`,
            method: 'GET',
            dataType: 'json',
            beforeSend:function(response){
              $('select[name="cidades"]').prop('disabled', true);

            },
            success: function (response) {

              let cidades = response.sort(function (a, b) {
                if (a.nome > b.nome) {
                  return 1;
                }
                if (a.nome < b.nome) {
                  return -1;
                }
                return 0;
              });

              let cidadesHtml = '';
              for (cidade of cidades) {
                cidadesHtml += `<option value="${cidade.id}">${cidade.nome}</option>`;
              }

              $('select[name="cidades"]').html(cidadesHtml);
              $('select[name="cidades"]').prop('disabled', false);
            }
          });
        });

      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Cidade por Estado</title>
	</head>
	<body>

	<select name="estados" id="estados"></select>
	<select name="cidades" id="cidades" disabled="disabled"></select>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
	$(function () {

	$.ajax({
	url: 'https://servicodados.ibge.gov.br/api/v1/localidades/estados',
	method: 'GET',
	dataType: 'json',
	success: function (response) {

	let estados = response.sort(function (a, b) {
	if (a.nome > b.nome) {
	return 1;
	}
	if (a.nome < b.nome) {
	return -1;
	}
	return 0;
	});

	let estadosHtml = '';
	for (estado of estados) {
	estadosHtml += `<option value="${estado.id}">${estado.nome}</option>`;
	}

	$('select[name="estados"]').html(estadosHtml);
	}
	});

	$('select[name="estados"]').change(function () {

	let id = $(this).val();

	$.ajax({
	url: `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${id}/municipios`,
	method: 'GET',
	dataType: 'json',
	beforeSend:function(response){
	$('select[name="cidades"]').prop('disabled', true);

	},
	success: function (response) {

	let cidades = response.sort(function (a, b) {
	if (a.nome > b.nome) {
	return 1;
	}
	if (a.nome < b.nome) {
	return -1;
	}
	return 0;
	});

	let cidadesHtml = '';
	for (cidade of cidades) {
	cidadesHtml += `<option value="${cidade.id}">${cidade.nome}</option>`;
	}

	$('select[name="cidades"]').html(cidadesHtml);
	$('select[name="cidades"]').prop('disabled', false);
	}
	});
	});

	});
	</script>
	</body>
	</html>