在 Select2 下拉列表中显示占位符

Question

Select2 是一个简洁的下拉菜单，结合了打字和自动完成功能。如果我不包含<option value="" selected="selected" style="display:none;"></option>，则默认情况下始终选择第一个选项，并且不会显示占位符。

还有比这更好的解决方案吗？

这是我在 HTML 中所做的：

<select id="my-dropdown">
  <option value="" selected="selected" style="display:none;"></option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

在 Javascript 文件中：

$('#my-dropdown').select2({
  placeholder: 'Choose One'
});

Answer 1

在您的 js 代码后添加以下内容：

$('#my-dropdown').val('').trigger('change');

或者更简单地将你的 js 代码更改为：

$('#my-dropdown').select2({
  placeholder: 'Choose One'
}).val('').trigger('change');

Fiddle

Answer 2

data-placeholder 属性适用于我，这是一个示例：

<select class="form-control" data-placeholder="Choose One">
    <option value=""></option>
    ...