占位符

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 多个选择框上的属性,需要IE 10+。您可以使用Placeholders.js polyfill在旧版本中支持它。

默认选择占位符

另外,placeholder 选项可以是代表默认选择的数据对象(<option>)。在这种情况下id,数据对象的应当与value相应默认选择的匹配。

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

例如,在使用创建自己的占位符选项的框架时,此功能很有用。

在AJAX中使用占位符

Select2支持所有配置(包括AJAX)的占位符。您仍然需要添加空白<option> 如果您使用的是单选。

自定义占位符外观

在单选模式下使用Select2时,占位符选项将通过templateSelection 回调(如果指定)。您可以在此回调中使用一些其他逻辑来检查 id 属性并将替代转换应用于占位符选项:

$('select').select2({
  templateSelection: function (data) {
    if (data.id === '') { // 调整自定义占位符值
      return '自定义样式占位符文本';
    }

    return data.text;
  }
});

当允许多个选择时,占位符将使用placeholder 属性在搜索框上。您可以使用CSS自定义此占位符的显示,如以下堆栈溢出答案中所述:使用CSS更改输入的HTML5占位符颜色。

旧版Internet Explorer版本中的占位符

Select2使用本机placeholder 多项选择输入框上的“属性”属性,而旧版本的Internet Explorer不支持该属性。您需要在页面上包含Placeholders.js或使用完整版本才能添加placeholder 属性支持输入框。