Select2多个选择和允许标签的默认值 [英] Select2 Default values for multiple select and allowed tags

问题描述

我有一个select 2多选选项

 < select multiple name =event_type []class = form-controlid =selectEvents> 
 @foreach（$ eTypes as $ type）
< option> {{$ type}}< / option> 
 @endforeach 
< / select> 
  

我想设置一些默认值，以防用户编辑表单。
我已经成功地做到了这一点

  var s2 = $（＃selectEvents）。select2（{ 
占位符：选择事件类型，
标签：true 
}）; 
 
 s2.val（[交易会，CA，派对））。 // CA不会显示为默认
  

但问题是我允许用户生成选项select2的标签：true 选项。

当我设置一个默认值工程，但是当我设置一个默认的用户生成它不起作用。

这是我第一次使用select2。

我该如何做到这一点？

解决方案

，我可以在 GitHub 上看到此问题。

其中一个选项是检查值是否存在，如果不存在则附加它。

< 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-controlid =selectEvents> < option>交易会< / option> <选项>聚会与LT; /选项> <选项>富< /选项> < / option>栏< / option>< / select>

I have a select 2 multi-select option

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

I want to set some default values just in case the user is editing the form. I have successfully done that by doing this

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

But the problem is i am allowing user generated options using the tags: true option for select2.

When I set a default value that was initially in the html options it works, but when I set a default that was user generated it doesn't work.

It is my first time using select2.

How can i achieve this?

解决方案

Doing a little digging, I can see this issue raised on GitHub.

One option is to check to see if the value exists, and append it if it doesn't.

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>

这篇关于Select2多个选择和允许标签的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！