选项

传统<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>