时间戳

首页 > 解决方案 > Javascript Select2 显示占位符

jquery - Javascript Select2 显示占位符

问题描述

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

标签： jqueryhtmljquery-select2

解决方案

如果您<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>

推荐阅读