Use multiselect with dynamically generated select

Question

I am trying to use the multiselect plugin I found on here:

How to use Checkbox inside Select Option

The question above is for a <select> with hard coded <options>.

The <select> I am using generates <options> using jQuery and PHP with this function:

function initializeSelect($select, uri, adapt){     
$.getJSON( uri, function( data ) {
    $select.empty().append($('<option>'));      
    $.each(data, function(index, item) {
        var model = adapt(item);
        var $option = $('<option>');
        $option.get(0).selected = model.selected;
        $option.attr('value', model.value)
            .text(model.text)
            .appendTo($select);                     
    });
  });
};

initializeSelect($('#salesrep'), 'process/getSalesReps.php', function (item) { 
  return {
    value: item.final_sales_rep,
    text: item.final_sales_rep
  }
});

I have used the above function several times in different projects, as it successfully creates all of the options brought in by the PHP process. Unless requested, I will not show the code for the process. Just know I am indeed retrieving a group of names and displaying them in the dropdown.

Right beneath the function above is where I call the multiselect feature:

$('select[multiple]').multiselect();

$('#salesrep').multiselect({
  columns: 1,
  placeholder: 'Select Reps'
});

The HTML for the select is as follows:

<select class="form-control" name="salesrep[]" multiple id="salesrep"></select>

Using all of the above, the output looks like this:

Upon inspecting the element, I can see all of the sales reps names. This tells me that the initializeSelect function is working properly.

Therefore I think the issue must have something to do with the multiselect.

What happens if you put the `multiselect()` function inside `getJSON` after the backend call? — Felippe Duarte, Feb 04 '20 at 17:48
use $('#salesrep').multiselect( 'refresh' ); after your appendto — Bryan Dellinger, Feb 04 '20 at 17:51
@FelippeDuarte I am not even sure how or where I would apply the multiselect inside the getJSON. — John Beasley, Feb 04 '20 at 17:51
I expect you need to call the `multiselect` function *after* the option list has been populated. — Moob, Feb 04 '20 at 17:52
Ajax calls ara async by default, so, by the time you call `multiselect` you don't have the ` — Felippe Duarte, Feb 04 '20 at 17:53
I appreciate the input from everyone. However, I am not having any luck. I have tried to apply all of the suggestions but I am only getting the same results. — John Beasley, Feb 04 '20 at 18:00
Formatting advice: to show pieces of HTML or XML, use backticks, ``. On some keyboards this is near the `Esc` key. — halfer, Feb 21 '20 at 20:50

score 3 · Accepted Answer · answered Feb 04 '20 at 18:03

Ajax calls are asynchronous. You call multiselect() before the ajax call has had time to complete and therefore the option list is still empty at the point you call the multiselect() function.

Either move the $('#salesrep').multiselect({.. bit to inside the getJSON method or call the multiselect refresh function after the option list has been populated as I am doing here. (Untested.)

function initializeSelect($select, uri, adapt){     
$.getJSON( uri, function( data ) {
    $select.empty().append($('<option>'));      
    $.each(data, function(index, item) {
        var model = adapt(item);
        var $option = $('<option>');
        $option.get(0).selected = model.selected;
        $option.attr('value', model.value)
            .text(model.text)
            .appendTo($select);                     
    });
    //now that the ajax has completed you can refresh the multiselect:
    $select.multiselect('refresh');
  });
};

initializeSelect($('#salesrep'), 'process/getSalesReps.php', function (item) { 
  return {
    value: item.final_sales_rep,
    text: item.final_sales_rep
  }
});

$('select[multiple]').multiselect();

$('#salesrep').multiselect({
  columns: 1,
  placeholder: 'Select Reps'
});

Yes. I moved both of the multiselect calls into the getJSON (as you suggested) and that solved my problem. Thank you, sir. — John Beasley, Feb 04 '20 at 18:12

Use multiselect with dynamically generated select

1 Answers1