선택 2에서는 I 가진 제

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} 성명.

하지만이 선택 2 스타일을보고 싶어, 그래서 수행합니다 : 그것은 잘 작동

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

내 문제는 내가 선택에 선택 2를 적용 할 때, 그것은 '원이다 다른 태그/옵션을 삽입하지 않으면 이미 'selected'요소의 태그를 표시하지 않습니다.

는 아무것도 (NO 태그) 표시되지 않습니다 먼저

: 나는 선택을 클릭하면

이 내 3 개 allready 선택한 옵션이 표시됩니다,하지만 여전히 태그가 없습니다 :

옵션을 클릭하면 선택한 옵션이 추가/제거되고 태그가 표시됩니다.

나는 선택 옵션을 열고 그 중 하나를 클릭 한 후에뿐만 아니라 매우 먼저 첫 번째 렌더링 이후에 thoose 태그가 나타나길 원합니다.

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>

속임수를 썼는지