Concept

The <optgroup> tag in HTML is used to group options within a <select> element. It allows you to create related option groups, making it easier for users to find and select the appropriate option.

How to use

Syntax

<select>
  <optgroup label="Nhóm 1">
    <option value="1">Tùy chọn 1</option>
    <option value="2">Tùy chọn 2</option>
  </optgroup>
  <optgroup label="Nhóm 2">
    <option value="3">Tùy chọn 3</option>
    <option value="4">Tùy chọn 4</option>
  </optgroup>
</select>

Where:

• The <optgroup> element is used to create an option group.
• The label attribute is used to name the option group.
• Each <optgroup> element can contain multiple <option> elements to create options within the group.

Example:

<select>
  <optgroup label="Màu sắc">
    <option value="red">Đỏ</option>
    <option value="blue">Xanh</option>
  </optgroup>
  <optgroup label="Kích cỡ">
    <option value="small">Nhỏ</option>
    <option value="medium">Trung bình</option>
    <option value="large">Lớn</option>
  </optgroup>
</select>

Result

In this example, we have created two option groups: "Colors" and "Sizes". Users can select one option from each group.