选项

传统<select>包含任意数量的<option>元素。在下拉菜单中，每个选项均作为选项呈现。在Select2上初始化时，Select2保留此行为。<select>包含的元素<option> 元素，将它们转换为其内部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="组名称">
    <option>嵌套选项</option>
  </optgroup>
</select>

Select2将自动拾取它们并在下拉菜单中适当地渲染它们。

分层选项

HTML规范仅允许单层嵌套。如果您嵌套<optgroup>在另一个<optgroup>，Select2将无法检测到额外的嵌套级别，因此可能会触发错误。

此外，<optgroup>元素不能被选择。这是HTML规范的限制，而不是Select2可以克服的限制。

如果您希望创建可选选项的真实层次结构，请使用 <option> 而不是 <optgroup> 并使用CSS更改样式。请注意，由于此方法依赖CSS样式，而不是基于<optgroup>，产生效果。

禁用选项

Select2将正确处理禁用的选项，这两个选项均使用来自标准select的数据（当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>