Javascript Select2 显示占位符

Question

Code(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 代码中添加额外的价值，所有这些都纯粹在 脚本。

小提琴：https://jsfiddle.net/0ojczr91/

Answer 1

如果在选择的开头添加一个空<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>

Answer 2

为了显示占位符值，必须将空白作为控件中的第一个选项。这是因为浏览器默认尝试选择第一个选项。如果第一个选项为非空，则浏览器将显示此选项而不是占位符。

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

Answer 3

由于您提到无法更改HTML代码，因此您需要自己创建一个选择选项并将其标记为选中。下面是 JS 代码

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

这是一个工作 JsFiddle