Popular a select PHP with MySQL data of city and state

I found some articles by Stack already, however, I tried anyway to make it work and I could not. I have a bank with all Brazilian states and cities, 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 end of this page there is an 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 is the file getCities

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

No matter how you try to select a state, it does not return any cities. The Chrome console returns the following:

Uncaught ReferenceError: getStates is not defined