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

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

<div >
    <div >
        <label  for="ddlCategories">Choose A Category...<strong>(required)</strong></label>
        <select  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.

CodePudding user response：

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 >
  <div >
    <div >
      <label  for="ddlCategories">Choose A Category...<strong>(required)</strong></label>
      <select  id="ddlCategories" title="Select..."></select>
    </div>
  </div>
</div>