資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 在下拉列表中建立一組相關的選項
概述
一組相關的選項是指所有專案都屬於同一類別的一組。例如，蘋果、香蕉、奇異果都屬於同一組，稱為水果；寶馬、奧迪、G級越野車都屬於汽車類別。因此，有時為了提供良好的使用者體驗，我們需要定義一個類別，其他選項都屬於該類別。為此，HTML 中有一個標籤可以提供此功能，用於將相同的選項分組到一個稱為“<optgroup>”的類別下。
語法
定義一組相關選項的語法如下：
<optgroup label=""> <option value=""></option> <option value=""></option> </optgroup>
<optgroup> 標籤中的 label 屬性允許我們定義一個類別名稱，所有選項都屬於該類別。
演算法
步驟 1 − 在程式碼編輯器中建立一個 HTML 基本程式碼。
步驟 2 −要建立下拉列表，請使用 select 標籤。
<select name="" id=""> </select>
步驟 3 − 現在使用 <optgroup> 標籤，此標籤允許在單個類別下建立選項。還可以繼承一些 <option> 標籤，這些標籤將在類別下建立選項。在 label 屬性中寫入類別的名稱
<optgroup label=""> <option value=""></option> <option value=""></option> <option value=""></option> </optgroup>
步驟 4 − 成功建立了包含一組相關選項的下拉列表。
示例
在此示例中，HTML <optgroup> 標籤用於建立一組相關選項。<optgroup> 標籤內的 label 屬性充當屬於同一類別的選項的標題。在此示例中，我們只為選項建立了三個組，但如果要向類別新增更多選項，只需在 <optgroup> 標籤中繼承 HTML <option> 標籤即可。<optgroup> 標籤還包含一個名為 disabled 的屬性。顧名思義，它將停用 <optgroup> 標籤包含 disabled 屬性的某些選項組。
<html>
<head>
<title>Create a group of related options</title>
</head>
<body>
<select name="" id="">
<option value="">--Choose options--</option>
<optgroup label="Group 1">
<option value="">option 1</option>
<option value="">option 1</option>
<option value="">option 1</option>
</optgroup>
<optgroup label="Group 2">
<option value="">option 2</option>
<option value="">option 2</option>
<option value="">option 2</option>
</optgroup>
<optgroup label="Group 3">
<option value="">option 3</option>
<option value="">option 3</option>
<option value="">option 3</option>
</optgroup>
</select>
</body>
</html>
下圖顯示了示例的輸出，其中我們可以看到有三個組，分別為“組 1”、“組 2”和“組 3”，它們分別具有“選項 1”、“選項 2”和“選項 3”作為選項。
結論
就像我們在房間裡使用架子來井井有條地整理我們的物品一樣。同樣，<optgroup> 標籤以系統的方式組裝選項，從而改善使用者體驗 (UX)。HTML 標籤的命名方式使其名稱易於理解，例如，看到 <optgroup> 標籤是由兩個單片語成的：“option + group = optgroup”。
488 次瀏覽
