<option> component tích hợp sẵn của trình duyệt cho phép bạn hiển thị một tùy chọn bên trong hộp <select>.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

Tham khảo

<option>

<option> component tích hợp sẵn của trình duyệt cho phép bạn hiển thị một tùy chọn bên trong hộp <select>.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

Xem thêm các ví dụ bên dưới.

Props

<option> hỗ trợ tất cả các thuộc tính phần tử thông thường.

Ngoài ra, <option> hỗ trợ các thuộc tính sau:

  • disabled: Một giá trị boolean. Nếu true, tùy chọn sẽ không thể chọn và sẽ xuất hiện màu xám.
  • label: Một chuỗi. Chỉ định ý nghĩa của tùy chọn. Nếu không được chỉ định, văn bản bên trong tùy chọn sẽ được sử dụng.
  • value: Giá trị được sử dụng khi gửi <select> mẹ trong một biểu mẫu nếu tùy chọn này được chọn.

Lưu ý

  • React không hỗ trợ thuộc tính selected trên <option>. Thay vào đó, hãy truyền value của tùy chọn này cho <select defaultValue> mẹ cho một hộp chọn không được kiểm soát hoặc <select value> cho một lựa chọn được kiểm soát.

Cách sử dụng

Hiển thị hộp chọn với các tùy chọn

Kết xuất một <select> với một danh sách các thành phần <option> bên trong để hiển thị một hộp chọn. Cung cấp cho mỗi <option> một value đại diện cho dữ liệu sẽ được gửi với biểu mẫu.

Đọc thêm về hiển thị một <select> với một danh sách các thành phần <option>.

export default function FruitPicker() {
  return (
    <label>
      Chọn một loại trái cây:
      <select name="selectedFruit">
        <option value="apple">Táo</option>
        <option value="banana">Chuối</option>
        <option value="orange">Cam</option>
      </select>
    </label>
  );
}
Previous<input>
Next<progress>