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> 

按照链接查看选择框的选项，它是一个空值。 https://drive.google.com/file/d/0B_JQE_eICBj6elpRYVZhU2w5eTA/view?usp=sharing

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

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

Answer 1

我想通了，我使用选择2 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'); 
     });