Используйте множественный выбор с динамически генерируемым выбором

Question

Я пытаюсь использовать плагин множественного выбора, который я нашел здесь:

Как использовать Флажок внутри Выберите вариант

Вопрос выше для <select> с жестким кодом <options>.

<select>, который я использую, генерирует <options> с использованием jQuery и PHP с этой функцией:

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

Я использовал выше функционировать несколько раз в разных проектах, так как он успешно создает все опции, введенные процессом PHP. Если не будет запрошено, я не буду показывать код процесса. Просто знайте, что я действительно извлекаю группу имен и отображаю их в раскрывающемся списке.

Прямо под вышеупомянутой функцией я вызываю функцию множественного выбора:

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

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

HTML для выбор следующий:

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

Используя все вышеперечисленное, вывод будет выглядеть следующим образом:

После проверки элемент, я могу видеть все имена торговых представителей. Это говорит мне, что функция initializeSelect работает правильно.

Поэтому я думаю, что проблема должна быть как-то связана с множественным выбором.

Answer 1

Ajax вызовы асинхронные. Вы вызываете multiselect () до того, как вызов ajax успел завершиться, и поэтому список параметров все еще пуст в точке, где вы вызываете функцию multiselect ().

Либо переместите бит $('#salesrep').multiselect({.. внутрь метод getJSON или вызов функции multiselect refre sh после заполнения списка опций, как я делаю здесь. (Не проверено.)

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