首页 文章

选择2个多个初始预选选项

提问于
浏览
3

我正在努力让select2使用多个预先选择的选项 . 我正在使用它让用户选择几个选项,然后保存它们然后能够返回并编辑它们 . 但是我无法使select2 initSelection正常工作以填充用户已选择的现有选项 . 这里是我尝试使用的代码与警报,以显示什么时候已经发出警报(“完成”);从来没有发射过警报($(元素).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

2 回答

  • 0

    事实证明,这是导致它不起作用的事物的组合 . 我没有将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"]);
    
  • 1

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

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

相关问题