My dropdown list using bootstrap multiselect not populating

Question

I am trying to create a multiselect dropdown list using the bootstrap javascript and css files. Unfortunately, my dynamically created set of options (using AJAX) does not appear to be populating the list.

I know it must be related to the multiselect feature because when I set it up as a single-select dropdown, it works great.

I wonder if it is related to when this function is called. The list is not called when the document is ready, but rather after the ajax call succeeds.

Here is the code:

 function Participants(sid){ console.log(sid); $('#participants').empty() $('#participants').append("<option>Loading......</option>"); $.ajax({ method:"POST", url:"participants_dropdown.php?sid="+sid, contentType:"application/json; charset=utf-8", dataType:"json", success: function(data){ console.log('success') $('#participants').empty(); $('#participants').append("<option value='0'>---Select Participants---</option>"); $.each(data, function(i, item){ $('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>'); }); }, complete: function(){ } }); $('#participants').multiselect('destroy'); $('#participants').multiselect(); } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script> <div class="col-md-4"> <h3><span>2) Select Market Participants</span></h3> <select id="participants" multiple class="form-control"> </select> </div> <!---sample JSON [{"operator":"Nexstar Media Group Inc","owner":"Mission Broadcasting Inc","call_sign":"KRBC-TV","facility_id":"306","primary_programming":"NBC"},{"operator":"Nexstar Media Group Inc","owner":"Nexstar Media Group Inc","call_sign":"KTAB-TV","facility_id":"59988","primary_programming":"CBS"},{"operator":"Prime Time Christian Broadcasting Incorporated","owner":"Prime Time Christian Broadcasting Incorporated","call_sign":"KPCB-DT","facility_id":"77452","primary_programming":"REL"},{"operator":"Sinclair Broadcast Group Inc","owner":"Sinclair Broadcast Group Inc","call_sign":"KTXS-TV","facility_id":"308","primary_programming":"ABC"},{"operator":"TEGNA Inc","owner":"TEGNA Inc","call_sign":"KXVA","facility_id":"62293","primary_programming":"FOX"}]---> 

Any guidance would be appreciated. I have tried various solutions suggested in similar posts but no luck.

Answer 1

In your Participants function you have an ajax call. Because this is an asynchronous call you need to move the destroy and create multiselect inside the success fragment:

function Participants(sid){
     console.log(sid);
     $('#participants').empty()
     $('#participants').append("<option>Loading......</option>");
     $.ajax({
         method:"POST",
         url:"participants_dropdown.php?sid="+sid,
         contentType:"application/json; charset=utf-8",
         dataType:"json",
         success: function(data){
             console.log('success')
             $('#participants').multiselect('destroy');
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE
             $('#participants').empty();
             $('#participants').append("<option value='0'>---Select Participants---</option>");
             $.each(data, function(i, item){
                 $('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
          });
             $('#participants').multiselect();
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE
         },
         complete: function(){
         }
     });
 }

The snippet (the button simulates the ajax call):

 $('#participants').empty() $('#participants').append("<option>Loading......</option>"); $('#participants').multiselect(); $('#btn').on('click', function(e) { var data = [{"operator":"Nexstar Media Group Inc","owner":"Mission Broadcasting Inc","call_sign":"KRBC-TV","facility_id":"306","primary_programming":"NBC"},{"operator":"Nexstar Media Group Inc","owner":"Nexstar Media Group Inc","call_sign":"KTAB-TV","facility_id":"59988","primary_programming":"CBS"},{"operator":"Prime Time Christian Broadcasting Incorporated","owner":"Prime Time Christian Broadcasting Incorporated","call_sign":"KPCB-DT","facility_id":"77452","primary_programming":"REL"},{"operator":"Sinclair Broadcast Group Inc","owner":"Sinclair Broadcast Group Inc","call_sign":"KTXS-TV","facility_id":"308","primary_programming":"ABC"},{"operator":"TEGNA Inc","owner":"TEGNA Inc","call_sign":"KXVA","facility_id":"62293","primary_programming":"FOX"}]; $('#participants').multiselect('destroy'); $('#participants').empty(); $('#participants').append("<option value='0'>---Select Participants---</option>"); $.each(data, function(i, item){ $('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>'); }); $('#participants').multiselect(); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script> <div class="col-md-4"> <h3><span>2) Select Market Participants</span></h3> <select id="participants" multiple class="form-control"> </select> <button id="btn" class="btn btn-primary">Click Me</button> </div>