Заполнитель не работает в select2

Я работаю Select2 Select-box.

проблема

Заполнитель не отображается в select2. Это всегда показывает первый вариант, выбранный в select2. Он автоматически выбирает первый вариант, я хочу показать вместо него заполнитель.

Мой код:

Автор сценария:

<script type="text/javascript">
    $(document).ready(function () {
       var data = $('#test_skill').select2({
            placeholder: "Please select an skill",
            allowClear: true
       });
    });

// I have also tried this: This is also not working
    $('#test_skill').select2({
      placeholder: {
        id: '-1', // the value of the option
        text: 'Please select an skill'
      } 
    });
</script>

HTML:

<select class="skills_select2" required name="test_skill" id="test_skill">          
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

Ответ 1

Просто поставьте <option></option> в выбрать на первом месте:

$(document).ready(function() {
  $selectElement = $('#test_skill').select2({
    placeholder: "Please select an skill",
    allowClear: true
  });
});

.skills_select2 {
  width: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />
<select class="skills_select2" required name="test_skill" id="test_skill">   
    <option></option>
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

Ответ 2

Чтобы заполнители работали правильно, вы должны добавить пустую опцию (т.е.) в качестве первого элемента, чтобы увидеть местозаполнитель.

Из документации Select2:

"Обратите внимание, что, поскольку браузеры предполагают, что первый элемент выбора выбран в блоках выбора с несколькими значениями, должен быть предоставлен пустой первый элемент опции() для работы заполнитель."

например:

<select class="skills_select2" required name="test_skill" id="test_skill"> 
    <option></option>    
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

и javascript будет:

$("#test_skill").attr(
   "data-placeholder","Please select an skill"
);

Ответ 3

Как установить его в html

<select>
  <option value="" disabled  selected>Select your option</option>
  <option value="your value ">your value</option>
</select>

Ответ 4

лучший способ для меня - установить его так, как показано ниже: отмените первое значение для данных/результата и установите заполнитель в select2

$.ajax({
      url: 'api/v1/users',
      type: 'GET',
      success: function(response) {
        let data = $.map(response, function(responseData) {
          return {
            id: responseData.id,
            text: responseData.name
          }
        });
        const selectedElement = $('#user_id');

        selectedElement.html('');

        data.unshift({id: -1, text: '', selected: 'selected', search:'', hidden:true });

        selectedElement.select2({
          theme: 'bootstrap',
          data: data,
          placeholder: {
            id: "-1",
            text: '--- Please select a user ---',
            selected:'selected'
          }
        });

Ответ 5

Переопределите templateSelection, чтобы решить проблему:

templateSelection: function(item) { 
   return item.name  // "name" property of received data from ajax
               || item.text; // "text" value of default selected option or placeholder text
}

Оригинальный ответ