Thẻ option và select trong html, thẻ optgroup.

Thẻ option và select trong html và cách sử dụng, một số bài tập và ví dụ

Định nghĩa và sử dụng

• Tag <option> định nghĩa một tùy chọn trong danh sách chọn lựa (danh sách thả xuống).
• Tag <option> bên trong thành phần select, định nghĩa giá trị tùy chọn trong danh sách.
• Tag <select> và <option> được thường được đặt trong <form> cho người dùng lựa chọn danh sách.

Cú pháp và thuộc tính

Cách sử dụng: <option thuoctinh="giá trị"></option>

Thuộc tính tùy chọn

Thuộc tính	Giá trị	Ví dụ	Mô tả
disabled	disabled	disabled="disabled"	Xác định danh sách thả xuống không hiển thị.
label	Text	label="optLabel"	Xác định nhãn cho tùy chọn.
selected	selected	selected="selected"	Xác định một tùy chọn được chọn mặc định.
value	Text	value="optValue"	Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit).

==================csss===========
Thuộc tính tổng quát

Thuộc tính	Giá trị	Ví dụ	Mô tả
class	Tên class	class="section"	Tên class
dir	rtl ltr	dir="rtl"	Xác định hướng văn bản cho các nội dung trong một thành phần.
id	Tên id	id="layout"	Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML
lang	Mã ngôn ngữ	lang="vi"	Xác định mã ngôn ngữ cho nội dung trong một thành phần.
style	Kiểu định dạng	style="color: red"	Xác định một định dạng cho một thành phần.
title	Text	title="Đây là title"	Xác định thêm thông tin cho thành phần.
xml:lang	Mã ngôn ngữ	lang="vi"	Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.

==================csss===========

Thuộc tính sự kiện
Không được hỗ trợ trong DTD Strict

Thuộc tính	Giá trị	Ví dụ	Mô tả
onclick	Code script	onclick="code"	Script chạy khi click chuột.
ondblclick	Code script	ondblclick="code"	Script chạy khi double click chuột.
onmousedown	Code script	onmousedown="code"	Script chạy khi button chuột được nhấn.
onmousemove	Code script	onmousemove="code"	Script chạy khi di chuyển con trỏ chuột.
onmouseout	Code script	onmouseout="code"	Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.
onmouseover	Code script	onmouseover="code"	Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.
onmouseup	Code script	onmouseup="code"	Script chạy khi button chuột được thả ra.
onkeydown	Code script	onkeydown="code"	Script chạy khi nút trên bàn phím được nhấn.
onkeypress	Code script	onkeypress="code"	Script chạy khi nút trên bàn phím được nhấn và thả ra.
onkeyup	Code script	onkeyup="code"	Script chạy khi nút trên bàn phím được thả ra.

========

Tag <option>  và tag <select>

Tag <option> được viết bên trong tag <select>.

Ví dụ 1: Html viết:

<select>
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</select>

Trình duyệt hiển thị

Danh sách 01Danh sách 02Danh sách 03Danh sách 03

Select - option với thuộc tính name

Đây là thành phần không thể thiếu của các thẻ nằm trong form, trong đó phải kể đến các thẻ input, textarea. Thẻ select cũng vậy, thuộc tính name cho phép JavaScript và các ngôn ngữ lập trình web như PHP lấy được dữ liệu mà người dùng nhập sau khi họ nhấn nút submit. Code mẫu:

Ví dụ 1

<select name="TenDanhSach">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Nó hiển thị như sau:

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Ví dụ 2

<select name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Nó hiển thị như sau

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng

Select - option với thuộc tính disabled

<select disabled="disabled">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định danh sách thả xuống không hiển thị.

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Select - option với thuộc tính multiple

<select multiple="multiple">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Hiển thị nhiều tùy chọn.

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Select - option với thuộc tính size

Với size, bạn sẽ quy định xem có bao nhiêu lựa chọn được hiển thị ra ngoài.

Ví dụ 1

Như ở trên có 4 giá nhà, và hiển thị ra ngoài ngay cái nhìn đầu tiên chỉ là 1 (khi đã nhấn vào rồi thì sẽ hiện hết). Giờ nếu bạn có 9 lựa chọn và muốn hiển thị ra ngoài 4 lựa chọn. Ví dụ:

<select name="gianha" size="4">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ</option>
   <option value="812">Từ 1.2 tỷ đến 1.5 tỷ</option>
   <option value="812">Từ 1.5 tỷ triệu đến 2 tỷ</option>
   <option value="812">Từ 2 tỷ triệu đến 3 tỷ</option>
   <option value="812">Từ 3 tỷ triệu đến 5 tỷ</option>
</select>

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ Từ 1.2 tỷ đến 1.5 tỷ Từ 1.5 tỷ triệu đến 2 tỷ Từ 2 tỷ triệu đến 3 tỷ Từ 3 tỷ triệu đến 5 tỷ

Ví dụ 2

<select size="3">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định số tùy chọn có thể thấy trong danh sách lựa chọn ở đây là 3 trong 4 danh sách.

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Option với thuộc tính disabled

Dùng để làm cả danh sách thả xuống hoặc một lựa chọn nào đó không khả dụng, ví dụ:

Ví dụ 1: Thuộc tính disabled dùng chay

<select>
<option disabled="disabled">Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định danh sách thả xuống không hiển thị - Danh sách 01 không được hiển thị

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Ví dụ 2: disabled với thuộc tính khác

Giả dụ các nhà có giá từ 300 - 400 triệu đã hết, bạn sẽ ngăn không cho người dùng chọn giá đó, các nhà có giá khác vẫn select được:

<select name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option disabled value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng

Option với thuộc tính label

<select>
<option label="label01">Danh sách 01</option>
<option label="label02">Danh sách 02</option>
<option label="label03">Danh sách 03</option>
<option label="label04">Danh sách 04</option>
</select>

Xác định nhãn cho tùy chon.

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Option với thuộc tính selected

<select>
<option>Danh sách 01</option>
<option selected="selected">Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>

Xác định một tùy chọn được chọn mặc định. Ở đây "Danh sách 2" được chọn hiển thị mặc định đầu tiên

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Option với thuộc tính value

<select>
<option value="value01">Danh sách 01</option>
<option value="value02">Danh sách 02</option>
<option value="value03">Danh sách 03</option>
<option value="value04">Danh sách 04</option>
</select>

Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit).

Danh sách 01Danh sách 02Danh sách 03Danh sách 04

Nhóm các lựa chọn liên quan bằng optgroup

Nếu bạn có một danh sách khá dài các chọn lựa, bạn có thể muốn nhóm các chọn lựa lại với nhau để người dùng dễ dàng quan sát và thao tác. Ta dùng thẻ optgroup.

<select name="gianha">
<optgroup label="Dưới 500 triệu">
<option value="499">499 triệu - 60m2</option>
<option value="350">350 triệu - 40m2</option>
<option value="250">250 triệu - 25m2</option>
</optgroup>

<optgroup label="Trên 500 triệu">
<option value="700">700 triệu - 85m2</option>
<option value="900">350 triệu - 100m2</option>
<option value="1200">1.2 tỷ - 150m2</option>
</optgroup>
</select>

Kết quả như sau: Nhấn vào hộp để thấy

499 triệu - 60m2350 triệu - 40m2250 triệu - 25m2 700 triệu - 85m2350 triệu - 100m21.2 tỷ - 150m2