HTML Tag: optgroup

Thẻ optgroup có chức năng nhóm các tùy chọn( option) có liên quan trong danh sách tùy chọn.

Nếu bạn có một dách sách bao gồm rất nhiều option thì việc nhóm các option có liên quan sẽ giúp cho người dùng dễ dàng xử lý hơn.

Cách sử dụng thẻ optgroup

Ví dụ: sử dụng thẻ optgroup để nhóm các framework của cùng một ngôn ngữ.

Code RUN
<select>
	<optgroup label="PHP Framework">
		<option>Laravel</option>
		<option>Zend 2</option>
	</optgroup>
	<optgroup label="js Framework">
		<option>Jquery</option>
		<option>Nodejs</option>
	</optgroup>
</select>

Các Framework của php đã được nhóm vào PHP Framework, của javascript được nhóm vào js Framework. VIệc nhóm các tùy chọn này giúp cho việc lựa chọn dễ dàng hơn đối với người dùng.

Các thuộc tính của thẻ optgroup

  • disabled - vô hiệu hóa các tùy chọn nằm trong cặp thẻ optgroup.
  • label - định rõ label cho nhóm optgroup.

Ví dụ: sử dụng thuộc tính disableb để vô hiệu nhóm js Framework.

Code RUN
<!DOCTYPE html>
<html>
    <head>
    	<title>Học lập trình miễn phí tại freetuts.net</title>
		<meta charset="utf-8">
	</head>
    <body>
    	<h1>Học lập trình miễn phí tại freetuts.net</h1>

		<select>
			<optgroup label="PHP Framework">
				<option>Laravel</option>
				<option>Zend 2</option>
			</optgroup>
			<optgroup label="js Framework" disabled="disabled">
				<option>Jquery</option>
				<option>Nodejs</option>
			</optgroup>
		</select>
	</body>
</html>

Người dùng sẽ không thể chọn được các tùy chọn trong nhóm js Framework.

Trình duyệt hỗ trợ

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Tham khảo: w3schools.com

Nguồn: freetuts.net