CODEWITHSUNDEEP
javascriptphpjquerymulti-select
John Beasley
John Beasley

Reputation: 3075

Use multiselect with dynamically generated select

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:

enter image description here

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.

Upvotes: 0

Views: 2457

Answers (1)

Moob
Moob

Reputation: 16184

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'
});

Upvotes: 3

Related Questions