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