占位符

Select2 支持使用placeholder配置选项来显示占位符值。在做出选择之前，将显示该占位符值。

文本占位符

最常见的情况是使用一段文本作为占位符值。

单选下拉框的占位符

<select class="js-example-placeholder-single js-states form-control">
  <option></option>
</select>

仅针对单选下拉框，为了显示占位符值，你必须在<option>中将第一个选项设置为空<select>控件中。这是因为浏览器默认会尝试选中第一个选项。如果你的第一个选项非空，浏览器将显示该选项而不是占位符。

多选下拉框的占位符

对于多选下拉框，你一定不要设置一个空的<option>元素内进行分组：

<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>

Select2 使用多选下拉框上的placeholder属性，这需要 IE10 或更高版本。你可以通过以下方式在旧版本中支持它：Placeholders.js 垫片脚本.

默认选择项的占位符

另一种方法是，placeholder选项的值可以是一个表示默认选择的数据对象（<option>）。在这种情况下，数据对象的id应与对应默认选择项的value相匹配。

$('select').select2({
  placeholder: {
    id: '-1', // the value of the option
    text: 'Select an option'
  }
});

这在某些场景中非常有用，例如你正在使用某个框架，而该框架会自行创建占位选项时。

在 AJAX 中使用占位符

Select2 支持为所有配置显示占位符，包括 AJAX。如果你使用的是单选下拉框，仍需要手动添加空的<option>选项。

自定义占位符外观

当使用 Select2在单选模式下时，如果指定了templateSelection回调函数，则占位符选项将会传入此回调函数中。你可以在这个回调函数中加入一些额外的逻辑，用于检查id属性，并对占位符选项应用不同的转换处理：

$('select').select2({
  templateSelection: function (data) {
    if (data.id === '') { // adjust for custom placeholder values
      return 'Custom styled placeholder text';
    }

    return data.text;
  }
});

当允许多个选择时，占位符将通过搜索框上的placeholder属性进行显示。你可以使用 CSS 来自定义该占位符的显示样式，详情请参见 Stack Overflow 的如下回答：使用 CSS 更改输入框 HTML5 占位符的颜色.

老旧 Internet Explorer 版本中的占位符

Select2 在多选下拉框中使用了原生的placeholder属性，但该属性在旧版 Internet Explorer 中不受支持。你需要在页面中引入Placeholders.js脚本，或使用完整版 Select2，才能为输入框添加placeholder属性的支持。