Select2 pre populated data value shows null on form submit

Question

I've tried initSelection in select2 to load some pre selected data in my multiple select box. User can select multiple options while creating an item and when s/he tries to edit that item again s/he can see all the selected values chosen by him/her and remove/add values from select.

It works fine and loads all pre selected options. It also shows them in multiple select box as selected. But when I submit my form select input has null value.

Here's my script

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

Follow the link to see select box options and it's value as null. https://drive.google.com/file/d/0B_JQE_eICBj6elpRYVZhU2w5eTA/view?usp=sharing

Also when I try to remove one pre loaded option it removes all pre loaded options from the select box.

Please help me to set values for pre populated options in select2 and handle remove values option. TIA

Answer 1

I just figured out that I am using select2 v4.0.0 initSelection has been deprecated and replaced with current method, to know more about this check select2 release announcements for version 4.0.0

I solved my problem by updating my script as below

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