Javascript Select2 显示占位符

Question

代码(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'
});

我想要什么：

选择之前，我希望它显示占位符 "Select a month"

要求

Don't want to add additional value into html code , all purely on the script.

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

Answer 1

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

Answer 2

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

<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 代码，因此您需要自己创建一个 Select 选项并将其标记为选中。下面是JS代码

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

这是一个有效的JsFiddle

Javascript Select2 显示占位符

Javascript Select2 Show Placeholder

html

jquery

jquery-select2