Filter problem using class="selectpicker" in filter select,

Question

Good afternoon, could anyone help me with this problem? I have no idea what’s going on....

Next, I have a select that selects the city, and then the following as selected the city, so far so good, it works and everything, but just I put the "selectpicker" class of the bootstrap, that stops working, does not charge more, I would like to put this class to letyou most presentable. Follows the code.

Filter:

<!-- quick search -->
        <form id="quick-search" class="quick-search" method="post" action="<?php echo $urlOrigem?>/resultado/">
            <fieldset>
                <legend>Convênios:</legend>

                <select name="cidades" id="cidade">
                    <option>Selecione Uma Cidade</option>
                        <?php 
                            $sql = mysql_query("SELECT * FROM convenioscidades ORDER BY name ASC")or die(mysql_error());
                            while($dados = mysql_fetch_array($sql)){
                        ?>
                        <option value="<?php echo  $dados['name'];?>"><?php echo  $dados['name'];?></option>
                        <?php }?>
                </select>   
                <select name="cat" id="convenios">
                    <option value="0">Aguardando cidade...</option>
                </select>
                <button type="submit">Procurar</button>
                <div class="switcher">
                    <button id="quick-search-switcher" type="button">Convênios</button>
                </div>
            </fieldset>             
        </form>

JS OF THE FILTER:

$(function(){
  var url = location.href; //pega endereço que esta no navegador
            url = url.split("/"); //quebra o endeço de acordo com a / (barra)
  var teste = 'testedsds';
$("select[name=cidades]").change(function(){
    beforeSend:$("select[name=cat]").html('<option value="0">Aguardando Carregando...</option>');

    var cat = $("select[name=cidades]").val();
    $.post ("http://localhost/dlcor_2017/convenios.php",{cat: cat}, function(pega_cat){
        complete:$("select[name=cat]").html(pega_cat);

    });

});

})

If anyone can help me, I’d be very grateful, Thank you!

Answer 1

When are added option dynamically, you need to call a function that updates the element, add this line in the complete after inserting the options.

$('.selectpicker').selectpicker('refresh');

More information