Выбор2 не показывают теги в первый рендеринг

Question

У меня есть этот выбор:

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

Выбранные значения загружаются из базы данных и впрыскивается в избранных с react.js через значение = {this.state.current_company.visits_type}. Он отлично работает:

Но я хочу, чтобы это выглядеть Select2 стиль, так что я:

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

Моя проблема заключается в том, что, когда я применить ВЫБ.2 к выбрать, он выиграл» t показывать теги уже выбранных элементов, если я не вставляю другой тег/параметр. не

Сначала он ничего не покажет (без тегов):

Если я нажимаю выбрать будет показывать мои 3 Allready выбранные варианты, но до сих пор нет теги:

Если я нажму любую опцию, он добавит/удалит выбранную опцию И ПОКАЗЫВАЕТ ТЕГИ:

Я хочу, чтобы тёмные теги отображались с самого первого рендеринга, а не только после того, как я открою параметры выбора и нажмите один из них.

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>