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

Posted 2023-05-07

【中文标题】Select2 多选和允许标签的默认值

【英文标题】：Select2 Default values for multiple select and allowed tags

【发布时间】：2016-10-21 09:29:08

【问题描述】：

我有一个选择 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。

我怎样才能做到这一点？

【问题讨论】：

在此处查看其他答案：***.com/a/42576487/1635774

【参考方案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>

【参考方案2】：

我最近不得不在 php 脚本中实现一个带有“多个”和“标签”选项的 select2，并遇到了类似的问题。文档说将任何初始选择添加为 html 选项标签，但是当我尝试添加两个时，只有一个会显示在我的 select2 控件中。

我最终使用配置对象“数据”选项初始化了 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>

【参考方案3】：

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

$('#properties').val(["Trade Fair", "CA", "Party"]);
$('#properties').select2();

它对我有用

小改进：

$('#province').val(["3", "4", "5"]).trigger('change');