3

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?

3
  • Como está vindo o retorno data na função Ajax? Está vindo no formato <option value="codigo_cidadex">Cidade X</option> ?
    – Maurivan
    Commented 21/02/2017 às 2:16
  • Sim, está retornando corretamente. Meu problema é não conseguir alterar o conteúdo da Div. Nem mesmo com o valor <option value="codigo_cidadex">Cidade X</option> dentro do próprio script.
    – DryAlves
    Commented 21/02/2017 às 23:16
  • Estou pensando que possa ser algo com o Bootstrap mesmo, mas ainda não sei o que é. Pois testei meu código em uma página limpa, sem framework, e ele funciona de todas as maneiras.
    – DryAlves
    Commented 21/02/2017 às 23:19

3 Respostas 3

0

Para inserir os options no seu select faça da seguinte forma:

municipios = document.getElementById('municipio');

municipios.options[municipios.options.length] = new Option('Texto', 'Valor');

e para zerar os valores basta apenas usar:

municipios.options.length = 0;
2
  • Obrigada pela resposta. Neste caso tentei enviar duas variáveis do php (cidade.php) através de: echo json_encode($retorno); Sendo o $retorno um array com os dados do banco, e no script receber através do var resultado = JSON.parse(data); . Porém não consegui.
    – DryAlves
    Commented 17/02/2017 às 23:58
  • Almer, não deu certo sua sugestão. Apesar de conseguir resolver o meu problema com Json, não está alterando os options.
    – DryAlves
    Commented 19/02/2017 às 10:14
0

Olá, eu mudaria algumas coisas, coisas simples. No seu PHP eu retornaria um array de cidades, ficaria mais ou menos assim:

<?php
$response = [];
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)) {
        $response[$resultado['CODIGO']] = $resultado['NOME'];
    }
} else {
    $response[0] = "Sem Cidade";
}
echo json_encode($response);
?>

No arquivo javascript, eu faria da seguinte forma:

<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',
                dataType: `json`,
                data: {
                    cd_estado: est
                },
                success: function(data) {
                    $("#municipio").empty();
                    Object.keys(response).forEach((index) => {
                        if (typeof index != undefined) {
                            var option = response[index];
                            var valueOption = Object.keys(response[index])[0];
                            var textOption = Object.values(response[index])[0];
                            $("#municipio").append(new Option(textOption, valueOption));
                        }
                    })
                }
            });

        });
    });
</script>
-1

Eu já tive um problema parecido, e se for o mesmo que o meu, seu problema está no refresh do Selectpicker e não do retorno, estou assumindo que você está usando o Selectpicker(bootstrap-select). Veja se isso te ajuda, eu fiz algumas melhorias na sua requisição.

No seu código o retorno é em HTML, então acrescentei o dataType: 'HTML', coloquei também a variável $this_estado ela possibilita você acessar os elementos navegando pelo DOM, no caso aqui ela assume o valor do caminho absoluto do seu elemento #estado.

Também adicionei o beforeSend, que ajuda a configurar um load mais real, baseado no tempo do retorno do seu código, se quiser ver ele em conexões rápidas coloque um sleep(1), no topo do seu arquivo cidade.php.

E o grande ponto aqui é $('.selectpicker').selectpicker('refresh'); que atualiza o Selectpicker para mostrar seus dados na tela.

OBS: Não entende o pq do innerHTML, mas se ele for obrigatório por algum motivo é só você adaptar, mas como já está usando jquery o código abaixo funciona da mesmo forma.

<script>
$(document).ready(function() {

    $("#estado").change(function(){

        //Pega o seletor do elemento;
        var $this_estado = $(this); 

        // Pega o valor do estado selecionado;
        var est = $this_estado.("#estado").val();

        $.ajax({
            type: 'POST',
            dataType: 'HTML',
            url: 'cidade.php',
            data: { cd_estado: est },
            beforeSend: function(){

                // Movi está opção para cá
                // O beforeSend é executado antes do retorno
                // Ótimo para criar animações de loading
                $this_estado.html('<option value="0">Carregando...</option>');

            },
            success: function(cidades){

                // Insere no select cidades os dados vindos da consulta.
                $('#municipio').html(cidades);

                // Atualize o selectpicker para os novos valores que foram inseridos nele.
                $('.selectpicker').selectpicker('refresh');

            }
        });

    });
    
});
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .