将 multiselect 与动态生成的 select 结合使用

Question

我正在尝试使用我在此处找到的 multiselect 插件：

How to use Checkbox inside Select Option

上面的问题是 <select> 硬编码 <options>。

我正在使用的 <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 过程带来的所有选项。除非有要求，否则我不会显示该过程的代码。只知道我确实在检索一组名称并将它们显示在下拉列表中。

在上面函数的正下方是我调用 multiselect 功能的地方：

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

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

select的HTML如下：

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

使用以上所有内容，输出如下所示：

检查元素后，我可以看到所有销售代表的姓名。这告诉我 initializeSelect 函数工作正常。

所以我认为这个问题一定与multiselect有关。

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

将 multiselect 与动态生成的 select 结合使用

Use multiselect with dynamically generated select

javascript

php

jquery

multi-select