Bootstrap-select control populates but doesn't display as dropdown

Question

I have a bootstrap-select control declared in my page (for an ASP.NET web application), like so:

<div class="row mb-2">
    <div class="col-lg-6">
        <label class="form-label" for="ddlCategories">Choose A Category...<strong>(required)</strong></label>
        <select class="form-control selectpicker" id="ddlCategories" title="Select..."></select>
    </div>
</div>

On page load, I call the following Javascript function to load a list of categories via an AJAX call into the control:

function loadCategories() {
    $.ajax({
        url: "../handlers/getcategorylist.ashx",
        type: 'post',
        dataType: 'json',
        data: null,
        success: function (response) {
            $('#ddlCategories').empty();
            $('#ddlCategories').append('<option value="0" selected>Please choose...</option>');
            for (var i = 0; i < response.length; i++)
                $('#ddlCategories').append('<option value=' + response[i].ID + '>' + response[i].Name + '</option>');
            $('#ddlCategories').selectpicker('refresh');
        },
        error: function (request, status, error) {
            $('#toastDataError').toast('show');
            $('#btnFinish').prop('disabled', true);
        }                
    });  
}

The AJAX call functions properly, and the data is getting loaded into the control. However, the bootstrap-select control doesn't display as a dropdown. The arrow is there on the right side, but the dropdown itself doesn't function. If I remove the selectpicker class then it displays properly. I have tried including the line $('#ddlCategories').selectpicker();' both before and after the call to the function that loads the control, but it doesn't seem to make any difference.

This isn't an error with loading the necessary Javascript or CSS libraries either, since I don't get any errors to this effect in the console, so I am stumped as to why selectpicker doesn't work. Any ideas on why this? Thanks in advance.

Answer 1

After reconstructing a minimal reproducible example it seems that it is working.

function success(response) {
  $('#ddlCategories').empty();
  $('#ddlCategories').append('<option value="0" selected>Please choose...</option>');
  for (var i = 0; i < response.length; i++)
    $('#ddlCategories').append('<option value=' + response[i].ID + '>' + response[i].Name + '</option>');
  $('#ddlCategories').selectpicker('refresh');
}

// fake ajax
setTimeout(function() {
  success([
    {ID: 1, Name: "cat"},
    {ID: 2, Name: "dog"},
    {ID: 3, Name: "dogger"},
  ]);
}, 500)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<div class="container">
  <div class="row mb-2 mt-2">
    <div class="col-lg-6">
      <label class="form-label" for="ddlCategories">Choose A Category...<strong>(required)</strong></label>
      <select class="form-control selectpicker" id="ddlCategories" title="Select..."></select>
    </div>
  </div>
</div>