Change select (ajax + php) element value with innerHTML

Hello, I'm doing the famous combo of state charges city. Everything is working perfectly, as I debugged in my script, until the moment it should change the value of select (options returned from the function). Here is my code (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>

Code (city.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);
         }
         });

    });
});

I have tried to change the value of the select "municipio" with the following alternatives:

$("#municipio").html(data);
$("#municipio").append(data);
document.getElementById("municipio").innerHTML = data;
$("select[name=municipio]").html(data);

None works. But in the "console.log (data);" the value is being returned correctly. What am I doing wrong?