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