HTML <optgroup>標(biāo)簽在 <select>控件的值的下拉列表中創(chuàng)建一組選項(xiàng)。這些下拉值由一系列 <option>標(biāo)簽定義，并使用 <optgroup>標(biāo)簽進(jìn)行分組。label <optgroup> 的值將顯示為 <select>控件中分組項(xiàng)目上方的灰色標(biāo)題。此標(biāo)簽通常也稱為 <optgroup>元素。
通過 <optgroup> 標(biāo)簽把相關(guān)的選項(xiàng)組合在一起：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML optgroup標(biāo)簽的使用(菜鳥教程 (cainiaoplus.com))</title> </head> <body> <label for="tutorial_choice">Tutorials: </label> <select id="tutorial_choice"> <optgroup label="Web"> <option value="html">HTML</option> <option value="css">CSS</option> </optgroup> <optgroup label="Database"> <option value="sql">SQL</option> <option value="oracle">Oracle</option> </optgroup> </select> </body> </html>測(cè)試看看 ?/?
在此HTML5文檔示例中，我們使用了<optgroup>標(biāo)記在下拉列表中創(chuàng)建兩個(gè)選項(xiàng)組。第一個(gè)選項(xiàng)組的標(biāo)題為Web，包含兩個(gè)下拉值-HTML和CSS。第二個(gè)選項(xiàng)組的標(biāo)題為“數(shù)據(jù)庫”，并包含兩個(gè)下拉值-SQL和Oracle。
IEFirefoxOperaChromeSafari
大多數(shù)主流瀏覽器支持 <optgroup>標(biāo)簽。
<optgroup>標(biāo)簽將一組<option>標(biāo)記組織到具有組標(biāo)題的選項(xiàng)組中。
label <optgroup> 的值將顯示為灰色標(biāo)題。所有分組的項(xiàng)目將作為縮進(jìn)的選項(xiàng)列表顯示在標(biāo)題下方。
默認(rèn)情況下，<select>標(biāo)記中的第一個(gè)選項(xiàng)將顯示為所選項(xiàng)目。用戶可以在下拉列表中選擇另一個(gè)選項(xiàng)。
如果你有很多的選項(xiàng)組合, 你可以使用<optgroup> 標(biāo)簽?zāi)軌蚝芎?jiǎn)單的將相關(guān)選項(xiàng)組合在一起。
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 規(guī)定禁用該選項(xiàng)組。 |
| label | text | 為選項(xiàng)組規(guī)定描述。 |
<optgroup> 標(biāo)簽支持全局屬性，查看完整屬性表 HTML全局屬性。
<optgroup> 標(biāo)簽支持所有 HTML事件屬性。