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

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

Displaying the placeholder in a Select2 dropdown

jquery-select2