Select2 нескольких исходных предварительно выбранных варианта

Я пытаюсь заставить select2 работать с несколькими предварительно выбранными параметрами. Я использую его, чтобы позволить пользователям выбирать несколько параметров, а затем сохранять их, чтобы затем можно было вернуться и отредактировать их. однако я не могу заставить select2 initSelection работать правильно, чтобы заполнить существующие параметры, которые пользователь уже выбрал. вот код, который я пытался использовать с предупреждениями, чтобы показать, когда что-то сработало, но предупреждение ("готово"); еще никогда не запускался, и предупреждение ($ (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

person Robert Parkinson    schedule 06.05.2015    source источник


Ответы (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"]);
person Robert Parkinson    schedule 07.05.2015

Вот проблема, которую я вижу здесь: $.ajax вызову требуется время для получения данных, а select2 конструктор не ждет установки initSelection.

Попробуйте переместить вызов ajax из инициализации select2 в функцию и вызвать ее сразу после инициализации select2

person borisano    schedule 06.05.2015
comment
будет ли это заполнить начальные значения? разве не в этом смысл initselection? - person Robert Parkinson; 07.05.2015
comment
Если вы хотите инициализировать select2 со значениями, сначала получите их через вызов ajax и после успешного вызова ajax (например, в обратном вызове success) инициализируйте свой select2 своими значениями - person borisano; 07.05.2015