Bootstrap selectpicker class, does not recognize insertion of <option> via jquery (.html())

Question

I’m using the Bootstrap framework, and the Selectpicker class to receive city data by status. The script works well, returns data, but instead of inserting <option> Cidade X </option> he just inserts Cidade X. I know the problem is in class, but I don’t know how to fix it. Class:

<div class="col-md-3  col-xs-4" id="cidade">

<select data-width="auto" id="municipio" name="municipio" class="selectpicker municipio">
    <option value="0" disabled="disabled">Selecione o estado</option>
</select>
</div>

Script:

    $(document).ready(function(){

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

        var est = document.getElementById("estado").value; 

        debugger;

        $.ajax({
        type: 'post',
         url: 'cidade.php',
         data: {
          cd_estado: est
         },
         success: function(dados) {
            $(".municipio").html(dados);
         }
         });

    });
});

Answer 1

When you use the . html () you override including the select element, imagining that you are bringing with ajax the "options" of this select, use the append() function to add child elements in the select.

Edit: bring the mounted element from your controller, that is, bring it within the tags "option".