javascript - 将值动态绑定(bind)到 jQuery 多选控件显示单选按钮

Question

我收到来自 Api 的响应，并且正在动态创建带有选项的 SELECT 控件。

这是我的 HTML

         <select id="resourceviewstop"></select>

我正在 Javascript 中循环响应，如下所示

         $.each(response, function (index, item) {
             $('<option value="' + item.Id+ '">' + item.Description + '</option>').appendTo('#resourceviewstop');
          });

将创建正常下拉列表，如下所示。

现在我尝试使用 jQuery 多选插件将多选应用于生成的下拉选项

        $('#resourceviewstop').multiselect({
                 includeSelectAllOption: true
        });

但我看到的是单选按钮而不是复选框。我怎样才能在这里获得复选框？

已编辑

如果我对选项进行硬编码，那么它将作为复选框出现:(但是我从 Json 获取数据并且不能硬编码。

生成的 HTML，我从开发人员工具中获取

Answer 1

多选有一种特殊的方式 add new option items.You 必须添加 multiselect('refresh') 来呈现新选项:

以下是添加值的方法:( http://jsfiddle.net/csdtesting/mpy72gyf/ )

var el  = $('#resourceviewstop').multiselect({
         header:false,
         includeSelectAllOption: true
    });
var newItem = $('#newItem');
var opt =  opt = $('<option />');
    $("#add").click(function(){
        var v = newItem.val(), opt = $('<option />', {
            value: v,
            text: v
        });
        opt.appendTo(el);
        el.multiselect('refresh');
    });

因此，您必须将追加操作更改为:

  $.each(response, function (index, item) {
    var opt = $('<option />', {
                value: item.Id,
                text: item.Description 
            });
            opt.appendTo(el);
            el.multiselect('refresh');
          });

希望这有帮助!

修订后的解决方案要求第 1 卷:http://jsfiddle.net/csdtesting/mpy72gyf/1/

第二卷 http://jsfiddle.net/mpy72gyf/2/