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

Question

我已经尝试 initSelection 在 select2 中加载一些预先 selected 的数据到我的多重 select 框中。用户可以在创建项目时 select 多个选项，当 s/he 尝试再次编辑该项目时 s/he 可以看到 select 选择的所有值 him/her 和remove/add 来自 select 的值。

它工作正常并加载所有预 selected 选项。它还将它们显示在多个 select 框中作为 selected。但是当我提交我的表单时 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>

跟随 link 查看 select 框选项，它的值为 null。 https://drive.google.com/file/d/0B_JQE_eICBj6elpRYVZhU2w5eTA/view?usp=sharing

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

请帮助我在 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');
        });

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

Select2 pre populated data value shows null on form submit

forms

jquery

jquery-select2

jquery-select2-4

select2