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

Question

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

How to use Checkbox inside Select Option

上面的问题是针对带有硬编码<options> 的<select>。

我正在使用的<select> 使用带有此功能的jQuery 和PHP 生成<options>：

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