Olá, estou fazendo o famoso combo de estado carrega cidade. Está funcionando tudo perfeitamente, conforme depurei no meu script, até o momento que deve alterar o valor do select (options retornados da função). Segue meu código (index.php):
<div class="form-group">
<label class="col-md-4 control-label col-xs-12" for="Endereco">Endereço*</label>
<div class="col-md-1 col-xs-4">
<select class="selectpicker" data-width="auto" id="estado" name="estado">
<?php
$query = "SELECT SIGLA, CODIGO FROM estado ORDER BY TX_SIGLA";
$result = mysqli_query($conectar, $query);
while ($resultado = mysqli_fetch_assoc($result)) { ?>
<option value="<?php echo $resultado['CODIGO']; ?>"><?php echo $resultado['SIGLA']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-3 col-xs-4">
<select data-width="auto" id="municipio" name="municipio" class="selectpicker">
<option value="0" disabled="disabled">Escolha o estado</option>
</select>
</div>
</div>
Código (cidade.php):
<?php
if (isset($_POST["cd_estado"])) {
$cod_estado = $_POST["cd_estado"];
$query = "SELECT NOME, CODIGO FROM municipio WHERE ESTADO = '$cod_estado' ORDER BY NOME";
$result = mysqli_query($conectar, $query);
while ($resultado = mysqli_fetch_assoc($result)) {
echo '<option value="' . $resultado['CODIGO'] . '">' . $resultado['NOME'] . '</option>';
}
} else {
echo "<option value='0'> Sem cidade </option>";
}
?>
Script:
<script>
$(document).ready(function() {
$("#estado").change(function() {
$("#municipio").html('<option value="0">Carregando...</option>');
var est = document.getElementById("estado").value;
$.ajax({
type: 'post',
url: 'cidade.php',
data: {
cd_estado: est
},
success: function(data) {
document.getElementById("municipio").innerHTML = data;
console.log(data);
}
});
});
});
</script>
Já tentei alterar o valor do select "municipio" com as seguintes alternativas:
$("#municipio").html(data);
$("#municipio").append(data);
document.getElementById("municipio").innerHTML = data;
$("select[name=municipio]").html(data);
Nenhuma funciona. Mas no "console.log(data);" o valor está sendo retornado corretamente. O que estou fazendo de errado?
data
na função Ajax? Está vindo no formato<option value="codigo_cidadex">Cidade X</option>
?<option value="codigo_cidadex">Cidade X</option>
dentro do próprio script.