Javascript Select2 Показать заполнитель - PullRequest
Новая
       9

Javascript Select2 Показать заполнитель

0 голосов
/ 01 октября 2019

Код (HTML) 

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

Код (СЦЕНАРИЙ) 

$('#example').select2({
    placeholder: 'Select a month'
});

Что я хочу:

До выбора, я хотел, чтобы он отображал заполнитель "Выбратьв месяц "

Требование

Не хочу добавлять дополнительные значения в HTML-код, все чисто в сценарии.

JsFiddle: https://jsfiddle.net/0ojczr91/

Ответы [ 3 ]

3 голосов
/ 01 октября 2019

Если вы добавите пустой <option></option> в начало вашего выбора, он будет работать. 

<select id="example" style="width: 300px">
  <option></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
</select>

Документацию по select2 и заполнителям можно найти здесь

Рабочая демонстрация 

$('#example').select2({
  placeholder: 'Select a month',
  allowClear: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<select id="example" style="width: 300px">
  <option></option>
  <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>
2 голосов
/ 01 октября 2019

Чтобы появилось значение заполнителя, вы должны иметь пробел в качестве первого параметра в вашем элементе управления. Это потому, что браузер пытается выбрать первый вариант по умолчанию. Если бы ваш первый вариант был не пустым, браузер отобразил бы это вместо заполнителя. 

<select id="example" class="exx" style="width: 300px">
    <option></option>
    <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>
1 голос
/ 01 октября 2019

Поскольку вы упомянули, что вы не можете изменить HTML-код, вам нужно будет самостоятельно создать опцию выбора, а также пометить ее как выбранную. Ниже приведен код JS 

$('#example').prepend('<option selected="selected"></option>');
$('#example').select2({
  placeholder: 'Select a month'
});

Вот рабочий JsFiddle

...