Selectセレクトデフォルト値

Question

は、私が選択2複数選択オプション

<select multiple name="event_type[]" class="form-control" id="selectEvents"> 
    @foreach ($eTypes as $type) 
     <option>{{$type}}</option> 
    @endforeach 
</select> 

私は、ユーザーがフォームを編集しているだけの場合には、いくつかのデフォルト値を設定したいを持っています。 私は正常にこの

var s2 = $("#selectEvents").select2({ 
    placeholder: "Choose event type", 
    tags: true 
}); 

s2.val(["Trade Fair", "CA", "Party"]).trigger("change"); //CA doesn't show as a default 

を実行していることを行っている。しかし、問題は、私はSELECT2ためtags: trueオプションを使用して、ユーザー生成されたオプションが可能にしています。

最初にhtmlオプションにあったデフォルト値を設定すると動作しますが、ユーザが生成したデフォルトを設定すると動作しません。

初めてselect2を使用しています。

これをどのように達成できますか？

Answer 1

少し掘り下げて、私はGitHubでこの問題が発生しているのを見ることができます。

値が存在するかどうかをチェックする方法と、値が存在しない場合はappendの方法があります。

var s2 = $("#selectEvents").select2({ 
 
    placeholder: "Choose event type", 
 
    tags: true 
 
}); 
 

 
var vals = ["Trade Fair", "CA", "Party"]; 
 

 
vals.forEach(function(e){ 
 
if(!s2.find('option:contains(' + e + ')').length) 
 
    s2.append($('<option>').text(e)); 
 
}); 
 

 
s2.val(vals).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/> 
 

 
<select multiple name="event_type[]" class="form-control" id="selectEvents"> 
 
    <option>Trade Fair</option> 
 
    <option>Party</option> 
 
    <option>Foo</option> 
 
    <option>Bar</option> 
 
</select>

Answer 2

私は最近、オプション「複数」とPHPスクリプトで「タグ」でSELECT2を実装しなければならなかった、と同様の問題に遭遇しました。ドキュメントでは、初期選択をhtmlオプションタグとして追加するように言われましたが、2つを追加しようとすると、select2コントロールに1つしか表示されませんでした。

私は動的に作成するconfigオブジェクトの 'data'オプションでselect2コントロールを初期化しました。

var initialPropertyOptions = []; 
 
@foreach ($model->properties as $initialProperty`) 
 
    var initialPropertyOption = { 
 
     id:   {{ $initialProperty->id }}, 
 
     text:  '{{ $initialProperty->name }}', 
 
     selected: true 
 
    } 
 
    initialPropertyOptions.push(initialPropertyOption); 
 
@endforeach 
 

 
$('#properties').select2({ 
 
    ajax: { 
 
     url:  route('models.propertySearch'), 
 
     dataType: 'json', 
 
     delay:  250, 
 
     processResults: function(data) { 
 
      return { 
 
       results: data 
 
      } 
 
     } 
 
    }, 
 
    placeholder:  'Enter property name', 
 
    minimumInputLength: 1, 
 
    multiple:   true, 
 
    tags:    true, 
 
    data:    initialPropertyOptions 
 
});

<div> 
 
    <label for="properties">Properties</label> 
 
    <select name="properties[]" id="properties"> 
 
    </select> 
 
</div>