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

Question

我试过一个例子： this example

它工作正常，但是当我尝试动态绑定时它不起作用。请任何人都可以提供帮助。

请查看以下代码：

下拉代码：

 <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 绑定时，它在填充下拉列表时工作正常。

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 一个数组才能设置 vals。 你正在这样做：

$.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/

Answer 2

感谢您的回复

我只是这样尝试过，它对我有用。

JQUERY

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