Select2入力済みのデータ値がフォーム送信時にNULLを表示します

Question

私は複数の選択ボックスに事前に選択したデータを読み込むためにselect2にinitSelectionを試しました。ユーザーは項目の作成中に複数のオプションを選択することができます。また、その項目を再度編集しようとすると、選択したすべての選択値が表示され、選択項目から値を削除または追加できます。

これは正常に動作し、すべての事前に選択されたオプションを読み込みます。選択した複数の選択ボックスにも表示されます。しかし私が私のフォーム選択入力を提出すると、null値を持っています。

はここ

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

選択ボックスのオプションを見るためにリンクをたどって私のスクリプトだと、それがnullとしての価値です。 https://drive.google.com/file/d/0B_JQE_eICBj6elpRYVZhU2w5eTA/view?usp=sharing

また、1つのプリロードされたオプションを削除しようとすると、プリロードされたすべてのオプションが選択ボックスから削除されます。

事前に入力されたオプションの値をselect2で設定し、値を取り除く処理を手伝ってください。 TIA

Answer 1

私はちょうど私がSELECT2のv4.0.0 initSelectionを使用していますことを考え出したことは、私が更新することで、私の問題を解決したバージョン4.0.0

ためには、このチェックselect2 release announcementsについての詳細を知るために、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'); 
     });