javascript - 在 Bootstrap-select 中动态选择多个值不起作用

Question

我试过一个例子: this example

它工作正常，但是当我尝试动态绑定(bind)时它不起作用。请任何人在这方面提供帮助。

请找到下面的代码:

下拉代码:

 <div class="col-md-4">
 <div class="form-group">
 <label for="field-2" class="control-label">Dropdown</label>
 <select class="form-control selectpicker" multiple data-selected-text-format="count" data-live-search="true" data-style="btn-white" id="lstdrpdwn" name="lstdrpdwn">
 </select>
 </div>
 </div>

** Jquery:**

 function FillDetail(id) {
        $.ajax({
            dataType: "json",
            type: "POST",
            url: '../Getdata',
            data: 'id=' + id,
            async: true,
            success: function (data) {
                $.each(data, function (i, item) {
                    alert('[' + item.CooperativeUserID + ']');
                    $('#lstdrpdwn').selectpicker('val', '[' + item.CooperativeUserID + ']');  //.val(item.CooperativeUserID);
                    $('#lstdrpdwn').selectpicker('refresh');
                })
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }

我还尝试删除 //$('#lstdrpdwn').selectpicker('refresh'); 行。

同时尝试刷新选择器
$('.selectpicker').selectpicker('refresh'); 它不起作用。

当我将值与静态 ID 绑定(bind)时，它在填充下拉列表时工作正常。

function filldropdown() {
        return $.ajax({
            dataType: "json",
            type: "POST",
            url: '../Getdropdown',
            data: 'id=0',
            async: true,
            success: function (data) {
                $("#lstdrpdwn").html("");
                $.each(data, function (key, val) {
                    $("#lstdrpdwn").append($("<option></option>").val(val.ID).html(val.Name));
                });
                $('#lstdrpdwn').selectpicker('refresh');
                $('#lstdrpdwn').selectpicker('val', [2,5]);

            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }

Answer 1

所以你必须给 selectpicker 一个数组来设置值。你是这样做的:

$.each(data, function (i, item) {
                    alert('[' + item.CooperativeUserID + ']');
                    $('#lstdrpdwn').selectpicker('val', '[' + item.CooperativeUserID + ']');  //.val(item.CooperativeUserID);
                    $('#lstdrpdwn').selectpicker('refresh');
                })

正确的做法应该是这样的:

var selected =  data.map(function(e) {
             return e.CooperativeUserID ;
           });
$('#lstdrpdwn').selectpicker('val', selected);

或使用 $.each :

var selected = [];
    $.each(data, function (i, item) {
                 selected.push(item.CooperativeUserID);       

                    });
$('#lstdrpdwn').selectpicker('val', selected);

你可以在这里找到一个例子:https://jsfiddle.net/segito/0u3nw1wc/