Select2 多个选择和允许标签的默认值

Question

我有一个 select 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

但问题是我允许用户使用 tags: true select2 选项生成选项。

当我设置一个最初在 html 选项中的默认值时它起作用，但是当我设置一个由用户生成的默认值时它不起作用。

这是我第一次使用 select2。

我怎样才能做到这一点？

原文由 Raymond Ativie 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 BenG 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种简单的方法是将值设置为选择选项并再次将其设置为 select2 ：

>  $('#properties').val(["Trade Fair", "CA", "Party"]);
> $('#properties').select2({});
>
> ```
>
> 它对我有用

小改进：

$(‘#province’).val([“3”, “4”, “5”]).trigger(‘change’);

”`

原文由 MrSalesi 发布，翻译遵循 CC BY-SA 4.0 许可协议