Select2 预填充的数据值在表单提交时显示为空

Question

我已尝试在 select2 中使用 initSelection 在我的多选框中加载一些预先选择的数据。用户可以在创建项目时选择多个选项，当她/他尝试再次编辑该项目时，她/他可以看到他/她选择的所有选定值并从选择中删除/添加值。

它工作正常并加载所有预先选择的选项。它还在多个选择框中显示它们被选中。但是当我提交表单时，选择输入的值为空。

这是我的脚本

$('.select2').select2({
            minimumInputLength: 2,
            "language": {
                "noResults": function(){
                    return "{{Lang::get('lang.no-department-found')}}";
                },
                searching: function() {
                    return "{{Lang::get('lang.searching')}}";
                },
                inputTooShort: function(args) {
                    // args.minimum is the minimum required length
                    // args.input is the user-typed text
                    var remaining = args.minimum - args.input.length;
                    return "{{Lang::get('lang.please-enter')}} "+remaining+" {{Lang::get('lang.or-more-character')}}";
                },
            },
            ajax: {
                url: "{{URL::route('api-get-department-names')}}",
                dataType: 'json',
                delay: 250,
                type: "GET",
                quietMillis: 50,
                data: function (params) {
                    return {
                        name: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            initSelection: function(element, callback) {
                var id;
                id = $(element).val();
                if (id !== "") {
                    $.ajax({
                        url: "{{URL::route('get-canned-department', $canned->id)}}",
                        type: "GET",
                        dataType: "json",
                    }).done(function(data) {
                        callback(data);
                    });;
                }
            }
        });

HTML

<select class="form-control select2" name="d_id[]" multiple="multiple" data-placeholder="{!! Lang::get('lang.enter-department-name') !!}" style="width: 50%;" disabled="true">
                </select>

点击链接查看选择框选项，它的值为 null。 https://drive.google.com/file/d/0B_JQE_eICBj6elpRYVZhU2w5eTA/view?usp=sharing

此外，当我尝试删除一个预加载的选项时，它会从选择框中删除所有预加载的选项。

请帮助我为 select2 中的预填充选项设置值并处理删除值选项。 TIA

Answer 1

我刚刚发现我正在使用 select2 v4.0.0 initSelection 已被弃用并替换为 current 方法，以了解有关此检查的更多信息 select2 release announcements 版本 4.0.0

我通过如下更新脚本解决了我的问题

var $element  = $('.select2').select2({
            minimumInputLength: 2,
            "language": {
                "noResults": function(){
                    return "{{Lang::get('lang.no-department-found')}}";
                },
                searching: function() {
                    return "{{Lang::get('lang.searching')}}";
                },
                inputTooShort: function(args) {
                    // args.minimum is the minimum required length
                    // args.input is the user-typed text
                    var remaining = args.minimum - args.input.length;
                    return "{{Lang::get('lang.please-enter')}} "+remaining+" {{Lang::get('lang.or-more-character')}}";
                },
            },
            ajax: {
                url: "{{URL::route('api-get-department-names')}}",
                dataType: 'json',
                delay: 250,
                type: "GET",
                quietMillis: 50,
                data: function (params) {
                    return {
                        name: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
        });     
        $('.select2-selection').css('border-radius','0px');
        $('.select2-selection').css('height','33px');
        $('.select2-container').children().css('border-radius','0px');

        var $request = $.ajax({
            url: "{{URL::route('get-canned-shared-departments', $canned->id)}}",
            dataType: 'json',
            type: "GET",
        });

        $request.then(function (data) {
            // This assumes that the data comes back as an array of data objects
            // The idea is that you are using the same callback as the old `initSelection`
            for (var d = 0; d < data.length; d++) {
                var item = data[d];
                // Create the DOM option that is pre-selected by default
                var option = new Option(item.text, item.id, true, true);
                // Append it to the select
                $element.append(option);
            }
            // Update the selected options that are displayed
            $element.trigger('change');
        });