Popular a select PHP with Mysql data of city and state

Question

I found some articles by Stack already, however, I tried anyway to make it work and could not. I own a bank with all states and cities of Brazil, which are ok.

Select page

<!-- Select Estado -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Estado</label>
<div class="col-md-6">
<select id="estados" name="selectEstado" class="form-control" onchange="getStates();">
<?php
$resultEstado = getEstado($con);
while ($rowEstado = $resultEstado->fetch_assoc()) {
echo "<option value=\"{$rowEstado['nome']}\">";
echo $rowEstado['nome'];
echo "</option>";
}
?>
</select>
</div>
</div>

<!-- Select Cidade -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Cidade</label>
<div class="col-md-6">
<select id="cidades" name="selectCidade" class="form-control">
<option value="">Selecione o Estado</option>
</select>
</div>
</div>

At the bottom of this page there is a include "include('footer.php');? > " where is the following script:

<script>
function getStates(){
$.ajax({
url:'lib/getCidades.php',
cache:false,
data:{state:$('#estados').val()},
beforeSend:function(){
// do something here. possibly a loader
},
success:function(response){
// remove the loader here
$('#cidades').html(response);
}
})
}
</script>

And here the file getCities

$resultCidadeBaladas = getCidadeBalada($con);
while ($rowCidade = $resultCidadeBaladas->fetch_assoc()) {
echo "<option value=\"{$rowCidade['nome']}\">";
echo $rowCidade['nome'];
echo "</option>";
}

No matter how hard you try to select a state, it returns no city. Chrome console returns the following:

Uncaught Referenceerror: getStates is not defined