Select2 在第一次渲染时不显示标签答案

【问题标题】：Select2 don't show tags at first renderingSelect2 在第一次渲染时不显示标签
【发布时间】：2017-06-04 22:28:26
【问题描述】：

我有这个选择：

<select id='visits_type' value={this.state.current_company.visits_type} onChange={this.handleChange} multiple='multiple'  className='form-control'>
    <option value="Visita Presencial">Visita Presencial</option>
    <option value="Telefone/Ligação">Telefone/Ligação</option>
    <option value="Email">Email</option>    
    <option value="WhatsApp">WhatsApp</option>
    <option value="Facebook">Facebook</option>  
    <option value="Site/Formulário de Contato">Site/Formulário de Contato</option>

选择的值从数据库中加载，并通过 value={this.state.current_company.visits_type} 语句注入到带有 react.js 的 select 中。它工作正常：

但我希望它看起来像 Select2 风格，所以我这样做了：

$('#visits_type').select2({ tags: true, multiple: true).on('change', self.handleChange);

我的问题是，当我将 select2 应用于选择时，除非我插入另一个标签/选项，否则它不会显示已经“选定”元素的标签。

一开始它什么都不会显示（没有标签）：

如果我单击选择，它将显示我的 3 个已选择的选项，但仍然没有标签：

如果我点击任何选项，它将添加/删除所选选项并显示标签：

我希望这些标签从第一次渲染开始就出现，而不仅仅是在我打开选择选项并单击其中一个之后。

【问题讨论】：

标签： javascript jquery reactjs select2

【解决方案1】：

您可以通过$(...).select2('val', values) 设置值。

$('#example').select2({
    placeholder: 'Select a month',
    tags: true,
    multiple: true
});

var selectedValues = [['JAN','FEB']];
$('#example').select2("val", selectedValues);

<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.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select id="example" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

【讨论】：