Javascript Select2 显示占位符答案

【问题标题】：Javascript Select2 Show PlaceholderJavascript Select2 显示占位符
【发布时间】：2019-10-01 08:52:57
【问题描述】：

代码(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/

【问题讨论】：

标签： jquery html jquery-select2

【解决方案1】：

如果您在选择的开头添加一个空的<option></option>，它将起作用。

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

关于select2和占位符的文档可以在here找到

工作演示

$('#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>

【讨论】：

@Greedo 年份我知道来源，正在编辑答案。
不想失礼，只是为提问者澄清一下
@Greedo 我知道，我只是通知你我正在添加它。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

这是一个有效的JsFiddle

【讨论】：

谢谢，这正是我需要的