将多选与动态生成的选择一起使用

Question

我正在尝试使用在这里找到的多选插件：

How to use Checkbox inside Select Option

上面的问题是针对带有硬编码的的。

我正在使用的生成使用具有此功能的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调用是异步的。您需要在ajax调用有时间完成之前调用multiselect（），因此在您调用multiselect（）函数时，选项列表仍然为空。

或者将$('#salesrep').multiselect({..位移到getJSON方法内部，或者在填充选项列表后调用多重选择刷新函数，就像我在这里所做的那样。 （未经测试。）

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