<optgroup>: Phần tử nhóm Option
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Phần tử <optgroup> trong HTML tạo ra một nhóm các tùy chọn trong phần tử <select>.
Trong các phần tử <select> có thể tùy chỉnh, phần tử <legend> được cho phép là con của <optgroup>, để cung cấp nhãn dễ nhắm mục tiêu và tạo kiểu. Điều này thay thế bất kỳ văn bản nào được đặt trong thuộc tính label của phần tử <optgroup>, và nó có cùng ngữ nghĩa.
Try it
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
label {
display: block;
margin-bottom: 10px;
}
Note: Các phần tử optgroup không thể được lồng vào nhau.
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục.
disabled-
Nếu thuộc tính Boolean này được đặt, không có mục nào trong nhóm tùy chọn này có thể được chọn. Thường trình duyệt làm xám điều khiển như vậy và nó sẽ không nhận bất kỳ sự kiện duyệt nào, như nhấp chuột hoặc sự kiện liên quan đến tiêu điểm.
label-
Tên của nhóm các tùy chọn, mà trình duyệt có thể sử dụng khi gắn nhãn các tùy chọn trong giao diện người dùng. Thuộc tính này là bắt buộc nếu phần tử này được sử dụng.
Ví dụ
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Không có. |
|---|---|
| Nội dung cho phép | Không hoặc nhiều phần tử <option>. Trong phần tử select có thể tùy chỉnh, phần tử <legend> được cho phép là con của <optgroup>. |
| Bỏ qua thẻ |
Thẻ mở là bắt buộc. Thẻ đóng là tùy chọn nếu phần tử này
được theo sau ngay bởi phần tử <optgroup> khác, hoặc
nếu phần tử cha không có thêm nội dung.
|
| Phần tử cha cho phép | Phần tử <select>. |
| Vai trò ARIA ngầm định | group |
| Vai trò ARIA cho phép | Không có role nào được phép |
| Giao diện DOM | HTMLOptGroupElement |
Đặc tả
| Specification |
|---|
| HTML # the-optgroup-element |
Tương thích trình duyệt
Xem thêm
- Các phần tử liên quan đến form khác:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress>và<meter>. - Phần tử select có thể tùy chỉnh