选项

传统的<select>下拉框可以包含多个<option>元素。每个这样的元素在下拉菜单中都会被渲染为一个选项。当在包含<select>元素的<option>元素上初始化 Select2 时，它会保留这种行为，并将这些选项转换为其内部的 JSON 表示形式：

{
  "id": "value attribute" || "option text",
  "text": "label attribute" || "option text",
  "element": HTMLOptionElement
}

<optgroup>元素将根据以下规则转换为数据对象：

{
  "text": "label attribute",
  "children": [ option data object, ... ],
  "element": HTMLOptGroupElement
}

来自其他数据源的选项必须符合同样的内部表示形式。详情请参阅“Select2 数据格式”。

下拉选项分组

在 HTML 中，<option>元素可以通过包裹在<optgroup>元素内进行分组：

<select>
  <optgroup label="Group Name">
    <option>Nested option</option>
  </optgroup>
</select>

Select2 会自动识别这些分组并在下拉菜单中正确渲染它们。

层级选项

根据 HTML 规范，每个选项仅允许单层嵌套。如果你在一个<optgroup>元素内嵌套了另一个<optgroup>元素，Select2 将无法检测到额外的嵌套层级，并可能导致错误。

此外，<optgroup>元素不可以被设置为可选。这是 HTML 规范本身的限制，而不是 Select2 所能解决的问题。

如果你想创建真正的可选层级结构，请改用<option>元素而非<optgroup>和并通过 CSS 修改样式。请注意，这种方法可能被认为是“可访问性较差”的，因为它依赖的是 CSS 样式而不是<optgroup>元素的语义含义来实现效果。

禁用选项

Select2 可以正确处理禁用状态的选项，无论是来自标准下拉框（当设置了disabled属性）的数据，还是来自远程数据源（在对象中设置了disabled: true的情况）。

<select class="js-example-disabled-results">
  <option value="one">First</option>
  <option value="two" disabled="disabled">Second (disabled)</option>
  <option value="three">Third</option>
</select>