data-* 属性

建议您在初始化Select2时通过传入一个对象来声明配置选项。但是,您也可以使用HTML5定义配置选项data-*属性,它将覆盖初始化Select2时设置的所有选项以及任何默认值

<select data-placeholder="Select a state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

不支持某些选项,因为data-*, 例如disabled 因为它不是Javascript选项,而是HTML 属性.

嵌套(子项)选项

有时,您的选项嵌套在顶级选项下。例如,选项下的ajax 选项:

$(".js-example-data-ajax").select2({
  ajax: {
    url: "http://example.org/api/test",
    cache: false
  }
});

将这些选项写为data-* 属性,每个嵌套级别都应由两个破折号(--)分隔:

<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true">
    ...
</select>

该选项的值取决于jQuery的HTML5数据属性解析规则。

由于jQuery错误,嵌套选项使用data-* 属性在jQuery 1.x中不起作用。

camelCase 选项

HTML数据属性不区分大小写,因此所有包含大写字母的选项都将被解析,就好像它们都是小写字母一样。因为Select2有很多选项驼峰式(CamelCase),单词之间用大写字母隔开,所以必须用破折号写出这些选项。因此通常称为allowClear 应该改为 allow-clear.

这意味着声明您的<select> 标记为…

<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true">
    ...
</select>

将被解释为与将Select2初始化为…

$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true
});