Append not working properly in a Select after AJAX request

Question

I need to make sure that when completing the requisition AJAX the jquery insert the options in a select but when doing so options do not appear when clicking but when inspecting shows that they are present in the select

Request script:

$(document).ready(function(){

        $.get("http://localhost/infinityy/assets/php/list-categories.php", function(data){
            categories  = JSON.parse(data);
            var select = $("#category");

            $(categories).each(function(){
                 var option = $("<option>");
                 option.attr("value", this.id);
                 option.text(this.name);
                 console.log(option);

                 select.append(option);

            });
        });

 });

Select:

<form  action="assets/php/add-category.php" method="post">
   <div id="form" class="form-group">
     <div class="form-group">
         <label>Categoria <a href="#" class="add-category"><i class="fa fa-plus" aria-hidden="true"></i></a></label>
         <select id="category" name="category" class="selectpicker" data-title="Categoria" data-style="btn-default btn-block" data-menu-style="dropdown-blue" required>

     </div>
   </div>
 </form>

Result even clicking does not show the options

**When inspecting the Select: **

Answer 1

When you add options dynamically or change the state of select using select picker, you need to call a function that updates the element, add that line after adding the options.

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

More information: https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh

Answer 2

The function load has documentation that can be seen here.

It will load content within the parameter passed to it. An example with your case would be

Javascript:

$("#category").load("http://localhost/infinityy/assets/php/list-categories.php >", function () {
});

In php you do the query you do the same way, but instead of returning json, returns the variable you want for a view . php or . phtml

HTML:

<?php foreach($opcoes as opcao): ?>
    <option value="<?php echo $opcao['valor']?>"> <?php echo $opcao['nome']; ?></option>
<?php endforeach; ?>

This way, you will go through the $options array that contains the value and name of your option and fill in the html within your select.