data-* 属性

建议您通过传入一个对象的方式来声明配置选项来初始化 Select2但是，您也可以使用 HTML5data-*属性来定义配置选项，这些属性将覆盖初始化 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 data 属性。

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

camelCase选项

HTML data 属性是不区分大小写的，因此任何包含大写字母的选项都会被解析成全部小写的形式。因为 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
});