Select trong HTML: dropdown, option, optgroup và multiple

Cách tạo dropdown trong HTML

Danh sách thả xuống là một phần tử <select> với một <option> cho mỗi lựa chọn. value của mỗi option là thứ form gửi đi; chữ nằm giữa hai thẻ là thứ người dùng nhìn thấy. Hãy chọn một mục và nhấn Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Form gửi language=js: name của select và value của option được chọn. selected đặt lựa chọn mặc định; nếu không có, option đầu tiên được chọn. Nếu option không có value, chữ của nó sẽ được gửi đi.

Nối label với select bằng for và id (hoặc bọc select bên trong label) để khi click vào label, dropdown nhận focus và trình đọc màn hình đọc được tên của nó.

Thuộc tính của select và option

Option placeholder cùng required

Select luôn có một giá trị, nên khi không có placeholder, option thật đầu tiên sẽ được gửi đi dù người dùng chưa hề chạm vào dropdown. Một option rỗng ở đầu khắc phục điều đó, và required chặn việc gửi form cho đến khi chọn một option thật:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Nhấn Continue trước khi chọn: trình duyệt từ chối và yêu cầu bạn chọn một mục. Placeholder có value="", giá trị mà required coi là rỗng, và có disabled để không thể chọn lại nó sau khi đã chọn một quốc gia.

Nhóm các option bằng optgroup

<optgroup label="..."> đặt một tiêu đề phía trên một nhóm option. Tiêu đề này không chọn được:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Không thể lồng nhóm vào nhau: một danh sách chỉ có một cấp tiêu đề, không hơn. disabled trên một <optgroup> sẽ tắt mọi option trong nhóm.

Chọn nhiều lựa chọn

multiple cho phép người dùng chọn nhiều option, và biến dropdown thành hộp danh sách. Giữ Ctrl (Cmd trên Mac) để thêm từng option, hoặc Shift để chọn một dải liền nhau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Form gửi skills=html và skills=css: cùng một name lặp lại cho mỗi option được chọn. Nhiều người không biết thao tác Ctrl+click, nên khi chỉ có vài lựa chọn, một nhóm checkbox sẽ dễ dùng hơn.

Đọc và gán giá trị bằng JavaScript

select.value đọc và gán value của option được chọn, và sự kiện change xảy ra khi người dùng chọn một option khác. Một cách dùng phổ biến là dropdown thứ hai có các option phụ thuộc vào dropdown thứ nhất:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) tạo một option. select.selectedIndex là vị trí của option được chọn, còn select.selectedOptions liệt kê các option được chọn, đó là cách đọc một select chọn nhiều.

Định dạng select

Danh sách mở ra của dropdown do trình duyệt và hệ điều hành vẽ, và phần lớn không định dạng được. Còn hộp đóng thì được: appearance: none bỏ mũi tên gốc, và một ảnh nền đặt mũi tên của riêng bạn vào chỗ đó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Padding thêm ở cuối chừa chỗ cho mũi tên để chữ của option dài không chạy xuống dưới nó. font: inherit ở đây quan trọng không kém trên nút bấm: mặc định select dùng font form nhỏ của trình duyệt. Các option trong danh sách mở vẫn giữ giao diện gốc. Chrome cũng định dạng được danh sách mở khi bạn bật appearance: base-select; trình duyệt chưa hỗ trợ sẽ hiện danh sách gốc. Muốn kiểm soát hoàn toàn trên mọi trình duyệt thì phải tự dựng một widget với ARIA, và làm đúng khó hơn nhiều so với vẻ ngoài.

select, radio button hay datalist?

Lỗi thường gặp

• Không có placeholder cho một lựa chọn bắt buộc. Option thật đầu tiên được gửi đi dù người dùng chưa từng chọn nó.
• Placeholder có giá trị thật, như value="none". required coi đó là một lựa chọn hợp lệ. Hãy dùng value="".
• Option không có value khi chữ dài hoặc được dịch. Máy chủ nhận chữ hiển thị, và chữ này thay đổi theo ngôn ngữ.
• multiple cho vài lựa chọn. Checkbox dễ dùng hơn.
• Lắng nghe click trên option. Hãy dùng change trên <select>; sự kiện này cũng xảy ra khi thay đổi bằng bàn phím.
• Không có label. Một select chỉ có placeholder sẽ không còn tên khi đã chọn một option.