Select2预填充的数据值显示表单上的null

Question

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

它可以正常工作，并加载所有预选选项。它还以选定的方式将它们显示在多个选择框中。但是，当我提交表格时，选择输入的值为无效。

这是我的脚本

$('.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>

按下链接以查看Select框选项，并将其值为null。https://drive.google.com/file/d/0b_jqe_eicbj6elpryvzhu2w5eta/view?usp = sharing

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

请帮助我为Select2中的填充选项设置值，并处理删除值选项。tia

Answer 1

我刚刚发现我正在使用select2 v4.0.0 initSelection已弃用并用 current方法替换，以了解有关此检查的更多信息。>

我通过在下面更新我的脚本来解决我的问题

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');
        });