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

Question

我有这个select:

<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>

selected 值从数据库加载，并通过 value={this.state.current_company.visits_type}react.js 注入 select声明。它工作正常：

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

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

我的问题是，当我将 select2 应用到 select 时，它不会显示已经 'selected' 元素的标签，除非我插入另一个 tag/option。

起初，它什么也不会显示（没有标签）：

如果我单击 select，它将显示我的 3 个已准备就绪的 selected 选项，但仍然没有标签：

如果我单击任何选项，它将 add/remove selected 选项并显示标签：

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

Answer 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>

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

Select2 don't show tags at first rendering

javascript

jquery

reactjs

select2