Использование плейсхолдера
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option></option>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2({
placeholder: 'Выберите значение',
// параметры ниже для красоты
width: 'auto',
minimumResultsForSearch: Infinity
});
</script>Здесь важны два момента: при запуске плагина используем параметр placeholder и в самом теге <select> первой должна идти пустая опция. Если ее не будет, то при запуске будет отображен не плейсхолдер, а первое значение из списка опций.
Динамический плейсхолдер
Если надо запустить несколько выпадающих списков одним скриптом, но с разными плейсхолдерами, то удобно хранить плейсхолдер как атрибут тега <select>:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<p>Первый список</p>
<select data-placeholder='Первый прейсхолдер'>
<option></option>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<p>Второй список</p>
<select data-placeholder='Второй прейсхолдер'>
<option></option>
<option>Третье значение</option>
<option>Четвертое значение</option>
<option>Пятое значение</option>
</select>
<script>
jQuery( 'select' ).select2({
placeholder: function() {
jQuery(this).data( 'placeholder' );
},
// параметры ниже для красоты
width: 'auto',
minimumResultsForSearch: Infinity
});
</script>