I have 02 selects that when you select the city of the first, it automatically fills in the state of the other. See:
<select name='Cidade' id='cidade' class="form-control" required='required'>
<option>Selecione a cidade</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option>
</select>
<script type=\"text/javascript\">
$(function(){
$('#cidade').change(function(){
if( $(this).val() ) {
$('#estado').hide();
$('.carregando').show();
$.getJSON('listar-estados.php?search=',{series: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value=\"' + j[i].id + '\">' + j[i].estado + '</option>';
}
$('#estado').html(options).show();
$('.carregando').hide();
});
} else {
$('#estado').html('<option value="">– Escolha o estado –</option>');
}
});
});
</script>
The states come from the Mysql database and are listed in PHP:
<?php
public function listarEstados($idCidades){
$sqlEstados = mysqli_query($this->conexao,"SELECT * FROM estados WHERE Cidades = '".$idCidades."';");
while($peEstados = mysqli_fetch_assoc($sqlEstados)){
$listarEstados[] = array(
'id' => $peCidades['$idEstados'],
'estados' => utf8_encode($peEstados['Estados']),
);
}
return (json_encode($listarEstados));
}
?>
HTML:
<div class="form-group">
<span class="carregando">Aguarde, carregando...</span>
<label for="estado" class="control-label">Estado: <span style="color: red">*</span></label>
<select name="Estado" id="estado" class="form-control" >
<option>Selecione a cidade acima</option>
</select>
</div>
It works perfectly, but how could I get the selected value in the state (second select) and play to the jquery below?
var estadousuario = document.querySelector('#estadousuario');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('keyup', function () {
paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";