使用 Select2() 4.0 加载和编辑远程数据答案

【问题标题】：Load and Edit Remote Data with Select2() 4.0使用 Select2() 4.0 加载和编辑远程数据
【发布时间】：2015-07-13 14:20:09
【问题描述】：

我在插入 Select2() v4.0 时遇到问题。我想从 boostrap 加载 mi Modal 中的远程数据并编辑这些值。我的代码是：

HTML

 <select id="txtAsistentes" class="js-example-basic-multiple" multiple="multiple" style="width: 100%" />

ControlToSelect2Format: function (controlId,ocultos) {
    var control = "#" + controlId;
    $(control).select2({          
        minimumInputLength: 2,  // minimumInputLength for sending ajax request to server
        width: 'resolve',   // to adjust proper width of select2 wrapped elements 
        tags: false,
        allowClear: false,
        multiple: true,
        ajax: {
            url: "/Home/SearchUserAD/",
            dataType: 'jsonp',
            data: function (params) {
                return {
                    term: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, page) {                 
                return { results: data.Results };
            }
        },          
        initSelection: function (element, callback) {
            var id = $("#hdReservaId").val();
            if (id !== "") {
                $.ajax({
                    url: "/Home/GetAsistentesReserva/",
                    dataType: "jsonp",
                    data: { idReserva: id }                       
                }).done(function (data) {

                    callback(data.Results);
                })
            }
        }
    });
}

InitSelection 没问题，因为我使用“select2.full.min.js”，但问题是当我尝试编辑 InitSelection 预充到我的 select2 控件的值时。我失去了价值并清除了控制。

如何在不删除值的情况下编辑初始值？

我的问题是当我想要编辑之前创建和保存的数据时。我不知道如何使用 select2() 进行编辑

谢谢！

【问题讨论】：

选择不能自动关闭，必须使用<select></select>。
@KevinBrown 我的问题是当我想编辑我之前创建和保存的数据时。我不知道如何用 select2() 编辑

标签： twitter-bootstrap asp.net-mvc-4 jquery-select2 jquery-select2-4

【解决方案1】：

最后我的解决方案是将这段代码放在 select() 初始化之后，并删除代码 initSelection：

    var id = $("#hdReservaId").val();
    if (id !== "") {
        $.ajax({
            url: "/Home/GetAsistentesReserva/",
            dataType: "jsonp",
            data: { idReserva: id }
        }).then(function (data) {
            data.Results.forEach(function (entry) {
                //alert(entry);
                var $option = $('<option selected>' + entry.text + '</option>').val(entry.id);
                $(control).append($option).trigger('change');
            });
            $(control).trigger('change');
        });
    }

如果打开modal进行编辑，调用ajax获取编辑数据。使用该方法，我可以毫无问题地编辑来自 select2() 多选的数据。

感谢您的支持！！

【讨论】：