Thẻ select
Thẻ select tạo một danh sách thả xuống
để sử dụng trong các biểu mẫu HTML.
Một mục riêng lẻ trong danh sách phải được đặt trong
thẻ option.
Thuộc tính
| Thuộc tính | Mô tả |
|---|---|
multiple |
Sự có mặt của thuộc tính này tạo ra đa lựa chọn -
một danh sách thả xuống, trong đó có thể chọn nhiều mục bằng cách nhấn giữ
phím Ctrl hoặc chọn chúng bằng chuột.
Thuộc tính không bắt buộc. |
name |
Tên của danh sách thả xuống. Cần thiết để lấy dữ liệu của trường nhập trong PHP. Để biểu mẫu hoạt động chính xác, tên của các trường nhập không được trùng nhau (trong cùng một biểu mẫu). Nếu chúng trùng nhau - trong PHP sẽ nhận được dữ liệu của trường nhập nằm ở vị trí thấp hơn trong mã HTML. |
Ví dụ
Hãy xem danh sách thả xuống hoạt động như thế nào:
<select>
<option>Thành phố 1</option>
<option>Thành phố 2</option>
<option>Thành phố 3</option>
<option>Thành phố 4</option>
</select>
:
Ví dụ
Hãy làm cho chiều rộng của danh sách thả xuống
bằng chiều rộng của phần tử lớn nhất (nếu
nó không được chỉ định rõ ràng bằng thuộc tính CSS
width):
<select>
<option>Thành phố Lớn 1</option>
<option>Thành phố 2</option>
<option>Thành phố 3</option>
<option>Thành phố 4</option>
</select>
:
Ví dụ . Lựa chọn mặc định
Bây giờ hãy thử chọn một thành phố
mặc định. Hãy thực hiện điều này bằng thuộc tính
selected:
<select>
<option>Thành phố Lớn 1</option>
<option selected>Thành phố 2</option>
<option>Thành phố 3</option>
<option>Thành phố 4</option>
</select>
:
Ví dụ . Đa lựa chọn
Bây giờ hãy biến một select thông thường thành
đa lựa chọn bằng thuộc tính multiple:
<select multiple name="city[]">
<option>Thành phố 1</option>
<option>Thành phố 2</option>
<option>Thành phố 3</option>
<option>Thành phố 4</option>
</select>
:
Lưu ý rằng tên của select, được đặt trong thuộc tính name,
phải có dấu ngoặc vuông ở cuối. Điều này là cần thiết để trong PHP
có thể nhận được tất cả các giá trị đã chọn (nếu không, chỉ một giá trị cuối cùng sẽ được nhận).
Ví dụ . Nhiều giá trị mặc định trong đa lựa chọn
Bây giờ, trong đa lựa chọn mặc định, hãy thử chọn nhiều hơn một giá trị:
<select multiple name="city[]">
<option>Thành phố 1</option>
<option selected>Thành phố 2</option>
<option>Thành phố 3</option>
<option selected>Thành phố 4</option>
</select>
: