Не отображается placeholder на select2

151

12 января 2020, 18:30

Вот пример как инициализируется плагин

$(".select_3_wrapp select").select2({ 
  "width": "100%", 
  minimumResultsForSearch: 1, 
  placeholder: $(this).attr("data-placeholder") 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="select_3_wrapp"> 
  <select data-placeholder="Введите город"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    <option>Option 3</option> 
    <option>Option 4</option> 
  </select> 
</div>

Почему не отображается placeholder?

Answer 1

Для отображение placeholder нужно добавить первым пустой option, и

$(".select_3_wrapp select").select2({ 
  "width": "100%", 
  minimumResultsForSearch: 1, 
    placeholder:  'Введите город' 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> 
<div class="select_3_wrapp"> 
  <select class="js-states form-control"> 
    <option></option> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    <option>Option 3</option> 
    <option>Option 4</option> 
  </select> 
</div>