Select2 多个初始预选选项

Question

我正在尝试让 select2 使用多个预选选项。我用它来让用户选择几个选项，然后将它们保存下来，然后可以回来编辑它们。但是我无法让 select2 initSelection 正常工作以填充用户已经选择的现有选项。这是我尝试与警报一起使用的代码，以显示何时触发了警报，但是警报（"done"）；从未触发过并且 alert($(element).val(0) 触发了两次。一次是输入中的值，然后是一个空白。

<input type="text" id="Commissioners" name="Commissioners" value="test" />

$("#Commissioners").select2({
                placeholder: 'Select Commissioners',
                minimumInputLength: 2,
                allowClear: true,
                multiple: true,
                width: 'resolve',
                ajax: {
                    url: "/Commissioner/CommissionerAutoComplete/",
                    dataType: 'json',
                    data: function (term, page) {
                        return {
                            search: term // search term
                        };
                    },
                    results: function (data) {
                        return { results: data };
                    }
                },
                initSelection: function (element, callback) {
                    // the input tag has a value attribute preloaded that points to a preselected make's id
                    // this function resolves that id attribute to an object that select2 can render
                    // using its formatResult renderer - that way the make text is shown preselected
                    alert($(element).val());
                    $.ajax({
                        url: "/UserProfile/LoadServiceTypeAndCommissioners",
                        type: "GET",
                        dataType: "json",
                        data: { UserId: '@Model.UserID', serviceTypeId: id}                            
                    }).done(function (data) {
                        alert("done");
                        callback(data.results);
                    });

                },
                formatResult: s2FormatResult,
                formatSelection: s2FormatSelection
            }).select2('val', []);



I figured out that the second alert fires for the .select2('val', []); at the end. however removing this causes the placeholder to not work and adding in a value here like ["1"] does not result in a selected item

Answer 1

这是我在这里看到的问题： $.ajax 调用需要时间来接收数据，select2 构造函数不等待 initSelection 设置。

尝试将 ajax 调用从 select2 初始化转移到一个函数，并在 select2 初始化后立即调用它

Answer 2

事实证明，这是导致它无法正常工作的原因。我没有将 ajax 调用的代码作为 json 对象返回，但仅此并没有解决问题。我必须向 ajax 调用添加成功和错误选项，并在成功时返回回调。奇怪的是，我仍然需要保留 .done 及其回调。

$("#Commissioners").select2({
                placeholder: 'Select Commissioners',
                minimumInputLength: 2,
                allowClear: true,
                multiple: true,
                width: 'resolve',
                ajax: {
                    url: "/Commissioner/CommissionerAutoComplete/",
                    dataType: 'json',
                    data: function (term, page) {
                        return {
                            search: term // search term
                        };
                    },
                    results: function (data) {
                        return { results: data };
                    }
                },
                initSelection: function (element, callback) {
                    // the input tag has a value attribute preloaded that points to a preselected make's id
                    // this function resolves that id attribute to an object that select2 can render
                    // using its formatResult renderer - that way the make text is shown preselected
                    //alert($(element).val());
                    $.ajax({
                        url: "/UserProfile/LoadServiceTypeAndCommissioners",
                        type: "GET",
                        dataType: "json",
                        data: { UserId: '@Model.UserID', serviceTypeId: id },
                        success: function (data) {                                
                            callback(data);
                        },
                        error: function (data) {

                        }
                    }).done(function (data) {                            
                        callback(data.results);
                    });

                },
                formatResult: s2FormatResult,
                formatSelection: s2FormatSelection
            }).select2('val', ["1"]);

Select2 多个初始预选选项

Select2 multiple initial pre-selected options

javascript

jquery

jquery-select2