<select>: Phần tử HTML Select

Try it

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Ví dụ trên cho thấy cách sử dụng <select> điển hình. Nó được cung cấp thuộc tính id để có thể liên kết với <label> cho mục đích khả năng tiếp cận, cũng như thuộc tính name để đại diện cho tên của điểm dữ liệu liên quan được gửi đến server. Mỗi tùy chọn menu được định nghĩa bởi một phần tử <option> lồng bên trong <select>.

Mỗi phần tử <option> nên có thuộc tính value chứa giá trị dữ liệu cần gửi đến server khi tùy chọn đó được chọn. Nếu không có thuộc tính value nào, giá trị mặc định là văn bản bên trong phần tử. Bạn có thể thêm thuộc tính selected trên phần tử <option> để làm cho nó được chọn theo mặc định khi trang tải lần đầu. Nếu không có thuộc tính selected nào được chỉ định, phần tử <option> đầu tiên sẽ được chọn theo mặc định.

Phần tử <select> được đại diện trong JavaScript bởi đối tượng HTMLSelectElement, và đối tượng này có thuộc tính value chứa giá trị của <option> được chọn.

Phần tử <select> có một số thuộc tính độc đáo bạn có thể sử dụng để kiểm soát nó, chẳng hạn như multiple để chỉ định nhiều tùy chọn có thể được chọn, và size để chỉ định bao nhiêu tùy chọn nên được hiển thị cùng một lúc. Nó cũng chấp nhận hầu hết các thuộc tính nhập liệu form chung như required, disabled, autofocus, v.v.

Bạn có thể lồng thêm các phần tử <option> bên trong các phần tử <optgroup> để tạo các nhóm tùy chọn riêng biệt bên trong dropdown. Bạn cũng có thể bao gồm các phần tử <hr> để tạo các dấu phân cách thêm ngắt trực quan giữa các tùy chọn.

Để biết thêm ví dụ, xem Các widget form gốc: Nội dung thả xuống.

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

autocomplete

Chuỗi cung cấp gợi ý cho tính năng tự động hoàn thành của user agent. Xem Thuộc tính tự động hoàn thành HTML để có danh sách đầy đủ các giá trị và chi tiết về cách sử dụng tự động hoàn thành.

autofocus

Thuộc tính Boolean này cho phép bạn chỉ định rằng điều khiển form nên có tiêu điểm nhập liệu khi trang tải. Chỉ một phần tử form trong tài liệu có thể có thuộc tính autofocus.

disabled

Thuộc tính Boolean này cho biết người dùng không thể tương tác với điều khiển. Nếu thuộc tính này không được chỉ định, điều khiển kế thừa cài đặt của nó từ phần tử chứa, ví dụ <fieldset>; nếu không có phần tử chứa nào có thuộc tính disabled được đặt, thì điều khiển được bật.

form

Phần tử <form> để liên kết <select> với (form sở hữu của nó). Giá trị của thuộc tính này phải là id của <form> trong cùng tài liệu. (Nếu thuộc tính này không được đặt, <select> được liên kết với phần tử <form> tổ tiên của nó, nếu có.)

Thuộc tính này cho phép bạn liên kết các phần tử <select> với <form> ở bất kỳ đâu trong tài liệu, không chỉ bên trong <form>. Nó cũng có thể ghi đè phần tử <form> tổ tiên.

multiple

Thuộc tính Boolean này cho biết nhiều tùy chọn có thể được chọn trong danh sách. Nếu không được chỉ định, thì chỉ một tùy chọn có thể được chọn mỗi lần. Khi multiple được chỉ định, hầu hết trình duyệt sẽ hiển thị hộp danh sách cuộn thay vì dropdown một dòng. Nhiều tùy chọn được chọn được gửi bằng quy ước mảng URLSearchParams, tức là name=value1&name=value2.

name

Thuộc tính này được dùng để chỉ định tên của điều khiển.

required

Thuộc tính Boolean cho biết phải chọn một tùy chọn có giá trị chuỗi không rỗng.

size

Nếu điều khiển được trình bày như hộp danh sách cuộn (ví dụ khi multiple được chỉ định), thuộc tính này đại diện cho số hàng trong danh sách nên hiển thị cùng một lúc. Trình duyệt không bắt buộc phải trình bày phần tử select như hộp danh sách cuộn. Giá trị mặc định là 0.

Note: Theo đặc tả HTML, giá trị mặc định cho size nên là 1; tuy nhiên, trong thực tế, điều này đã được phát hiện là làm hỏng một số website, và không có trình duyệt nào khác hiện tại làm điều đó, vì vậy Mozilla đã chọn tiếp tục trả về 0 cho Firefox cho đến thời điểm này.

Ghi chú sử dụng

Chọn nhiều tùy chọn

Trên máy tính để bàn, có một số cách để chọn nhiều tùy chọn trong phần tử <select> với thuộc tính multiple:

Người dùng chuột có thể giữ phím Ctrl, Command, hoặc Shift (tùy theo hệ điều hành) và sau đó nhấp nhiều tùy chọn để chọn/bỏ chọn chúng.

Người dùng bàn phím có thể chọn nhiều mục liên tiếp bằng cách:

• Lấy tiêu điểm trên phần tử <select> (ví dụ sử dụng Tab).
• Chọn một mục ở đầu hoặc cuối phạm vi họ muốn chọn bằng phím mũi tên Up và Down để đi lên và xuống các tùy chọn.
• Giữ phím Shift và sau đó sử dụng phím mũi tên Up và Down để tăng hoặc giảm phạm vi các mục được chọn.

Người dùng bàn phím có thể chọn nhiều mục không liên tiếp bằng cách:

• Lấy tiêu điểm trên phần tử <select> (ví dụ sử dụng Tab).
• Giữ phím Ctrl sau đó sử dụng phím mũi tên Up và Down để thay đổi tùy chọn "được tập trung", tức là tùy chọn sẽ được chọn nếu bạn chọn làm vậy. Tùy chọn select "được tập trung" được làm nổi bật bằng đường viền chấm, theo cách tương tự như liên kết được tập trung bằng bàn phím.
• Nhấn Space để chọn/bỏ chọn các tùy chọn select "được tập trung".

Tạo kiểu với CSS

Phần tử <select> lịch sử đã khó tạo kiểu hiệu quả với CSS. Các hướng dẫn sau đây chứa thông tin về các tính năng cho phép tùy chỉnh đầy đủ phần tử select:

• Phần tử select có thể tùy chỉnh
• Hộp danh sách select có thể tùy chỉnh

Tạo kiểu select cũ

Trong các trình duyệt không hỗ trợ các tính năng tùy chỉnh hiện đại (hoặc cơ sở mã cũ không thể sử dụng), bạn bị giới hạn trong việc thao tác mô hình hộp, font được hiển thị, v.v. Bạn cũng có thể sử dụng thuộc tính appearance để loại bỏ appearance mặc định của hệ thống.

Tuy nhiên, thật khó để đạt được kết quả nhất quán trên các trình duyệt với các phần tử <select> truyền thống. Nếu bạn muốn có toàn quyền kiểm soát, bạn nên cân nhắc sử dụng thư viện có cơ sở tốt để tạo kiểu widget form, hoặc thử tạo menu dropdown của riêng bạn bằng cách sử dụng các phần tử không ngữ nghĩa, JavaScript, và WAI-ARIA để cung cấp ngữ nghĩa.

Bạn có thể sử dụng lớp pseudo :open để tạo kiểu cho các phần tử <select> ở trạng thái mở, tức là khi danh sách tùy chọn thả xuống được hiển thị. Điều này không áp dụng cho các phần tử <select> nhiều dòng (những phần tử có thuộc tính multiple được đặt) — chúng thường hiển thị như hộp danh sách cuộn thay vì thả xuống, vì vậy không có trạng thái mở.

Để biết thêm thông tin về tạo kiểu <select> cũ, xem:

• Tạo kiểu HTML forms
• Tạo kiểu nâng cao cho HTML forms
• Thuộc tính field-sizing, kiểm soát cách các phần tử <select> được định cỡ liên quan đến các tùy chọn chứa của chúng.

Khả năng tiếp cận

<hr> bên trong <select> nên được coi là thuần trang trí, vì chúng hiện không được hiển thị trong cây tiếp cận và do đó không được hiển thị cho công nghệ hỗ trợ.

Ví dụ

Select cơ bản

Ví dụ sau tạo menu thả xuống ba giá trị, tùy chọn thứ hai được chọn theo mặc định.

<!-- Giá trị thứ hai sẽ được chọn ban đầu -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Kết quả

Select với các tùy chọn được nhóm

Ví dụ sau tạo menu thả xuống với nhóm bằng <optgroup> và <hr> để giúp người dùng dễ hiểu nội dung trong dropdown hơn.

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Kết quả

Select nâng cao với nhiều tính năng

Ví dụ sau phức tạp hơn, hiển thị nhiều tính năng hơn bạn có thể sử dụng trên phần tử <select>:

<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

Kết quả

Bạn sẽ thấy rằng:

• Nhiều tùy chọn có thể được chọn vì chúng tôi đã bao gồm thuộc tính multiple.
• Thuộc tính size khiến chỉ 4 dòng hiển thị cùng một lúc; bạn có thể cuộn để xem tất cả các tùy chọn.
• Chúng tôi đã bao gồm các phần tử <optgroup> để chia các tùy chọn thành các nhóm khác nhau. Đây là nhóm thuần trực quan, hình ảnh của nó thường bao gồm tên nhóm được in đậm và các tùy chọn được thụt lề.
• Tùy chọn "Hamster" bao gồm thuộc tính disabled và do đó không thể được chọn chút nào.

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Các sự kiện được kích hoạt bởi <select>: change, input
• Phần tử <option>
• Phần tử <optgroup>
• Phần tử select có thể tùy chỉnh