Thẻ Select và Option trong HTML: Tạo Dropdown List Từ A-Z

Bạn muốn tạo form tương tác trên website của mình? Vậy thì tìm hiểu về thẻ select và option trong HTML là bước không thể thiếu. Đây là bộ đôi quyền lực giúp bạn tạo ra các danh sách thả xuống (dropdown list) gọn gàng và chuyên nghiệp. Bài viết này của WiWeb sẽ hướng dẫn bạn từ A-Z cách sử dụng chúng, từ cú pháp cơ bản nhất đến các ví dụ thực tế dễ áp dụng.

Giới thiệu thẻ Select và Option trong HTML

Khi xây dựng một biểu mẫu (form) trên website, việc cho người dùng chọn một hoặc nhiều tùy chọn từ một danh sách định sẵn là rất phổ biến. Đó chính là lúc thẻ select và option trong HTML phát huy tác dụng. Hãy cùng WiWeb tìm hiểu vai trò của từng thẻ nhé.

Thẻ select

Hãy hình dung thẻ <select> như một chiếc hộp chứa. Bản thân nó không có gì cả, nhưng nó tạo ra một khung để chứa các lựa chọn. Khi người dùng nhấp vào, một menu sẽ xổ xuống. Đây chính là cách bạn tạo dropdown list HTML một cách đơn giản nhất. Thẻ này là thẻ bao ngoài, chịu trách nhiệm quản lý toàn bộ danh sách.

Thẻ option

Nếu <select> là chiếc hộp thì <option> (viết tắt của option – tùy chọn) chính là những món đồ bên trong. Mỗi thẻ <option> đại diện cho một mục mà người dùng có thể chọn. Bạn phải đặt các thẻ <option> lồng bên trong thẻ <select> thì chúng mới hoạt động được. Số lượng thẻ <option> là không giới hạn, cho phép bạn tạo ra các danh sách dài và đa dạng.

Ví dụ

Để bạn dễ hình dung, chúng ta hãy xem qua cú pháp kết hợp hai thẻ này. Cách này dễ lắm, bạn thử xem!

<label for="cars">Chọn một loại xe:</label>

<select name="cars" id="cars">
  <option value="vinfast">Vinfast</option>
  <option value="toyota">Toyota</option>
  <option value="ford">Ford</option>
  <option value="honda">Honda</option>
</select>

Trong ví dụ trên:

• <select> là thẻ bao bọc toàn bộ danh sách.
• Mỗi <option> là một lựa chọn xe cụ thể.
• Nội dung nằm giữa thẻ <option> và </option> (ví dụ: Vinfast) là thứ mà người dùng sẽ nhìn thấy.

Các thuộc tính của thẻ select

Để kiểm soát và tùy biến danh sách thả xuống trong HTML, bạn cần nắm vững các thuộc tính thẻ select html. Mỗi thuộc tính mang một công năng riêng, giúp bạn tạo ra những dropdown list linh hoạt và mạnh mẽ hơn.

Thuộc tính name và id

Hai thuộc tính này rất quan trọng nhưng thường bị nhầm lẫn. WiWeb sẽ giúp bạn phân biệt:

• name: Thuộc tính name được dùng để đặt tên cho thẻ <select>. Khi người dùng gửi form, giá trị của tùy chọn được chọn sẽ được gửi đến máy chủ cùng với tên này. Ví dụ: name="cars". Đây là thuộc tính bắt buộc nếu bạn muốn xử lý dữ liệu ở backend.
• id: Thuộc tính id dùng để định danh duy nhất cho thẻ <select> trên trang. Nó chủ yếu phục vụ cho việc tương tác với JavaScript hoặc định dạng bằng CSS. Bạn có thể dùng id để lấy giá trị người dùng chọn hoặc thay đổi giao diện của dropdown list.

Thuộc tính multiple

Mặc định, người dùng chỉ có thể chọn một tùy chọn. Nhưng nếu bạn muốn họ chọn nhiều mục cùng lúc (ví dụ: chọn nhiều sở thích), hãy thêm thuộc tính multiple.

<select name="hobbies" id="hobbies" multiple>
  <!-- các thẻ option ở đây -->
</select>

Lúc này, người dùng có thể giữ phím Ctrl (trên Windows) hoặc Command (trên Mac) và nhấp chuột để chọn nhiều giá trị.

Thuộc tính size

Thuộc tính size cho phép bạn kiểm soát số lượng tùy chọn được hiển thị cùng một lúc trong danh sách. Nếu giá trị của size lớn hơn 1, dropdown list sẽ biến thành một danh sách cuộn.

<select name="cars" id="cars" size="3">
  <!-- các thẻ option ở đây -->
</select>

Ví dụ trên sẽ hiển thị 3 tùy chọn đầu tiên, và người dùng có thể cuộn để xem các tùy chọn khác.

Thuộc tính disabled và autofocus

Đây là hai thuộc tính đơn giản nhưng rất hữu ích:

• disabled: Khi thêm thuộc tính này, toàn bộ danh sách thả xuống sẽ bị vô hiệu hóa. Người dùng không thể nhấp vào hay tương tác với nó.
• autofocus: Thuộc tính này giúp con trỏ chuột tự động tập trung vào danh sách thả xuống ngay khi trang được tải xong. Điều này giúp cải thiện trải nghiệm người dùng trên các form dài.

Các thuộc tính của thẻ option

Bên cạnh thẻ <select>, việc hiểu rõ các thuộc tính của thẻ <option> cũng quan trọng không kém. Chúng quyết định giá trị thực sự được gửi đi và trạng thái mặc định của danh sách.

Thuộc tính value

Đây là thuộc tính quan trọng nhất của thẻ <option>. Thuộc tính value của thẻ option xác định giá trị sẽ được gửi đến máy chủ khi người dùng chọn mục đó và gửi form. Nội dung hiển thị cho người dùng có thể khác với giá trị value.

<option value="HN">Hà Nội</option>

Trong ví dụ này:

• Người dùng sẽ thấy chữ Hà Nội.
• Nhưng khi họ chọn và gửi form, giá trị được gửi đi là HN.

Sử dụng value giúp dữ liệu của bạn ngắn gọn, nhất quán và dễ xử lý hơn ở phía backend.

Thuộc tính selected

Bạn muốn một tùy chọn nào đó được hiển thị sẵn khi người dùng vừa tải trang? Rất đơn giản, hãy sử dụng thuộc tính selected trong option. Thẻ <option> nào có thuộc tính này sẽ trở thành lựa chọn mặc định.

<select name="city" id="city">
  <option value="HN">Hà Nội</option>
  <option value="HCM" selected>TP. Hồ Chí Minh</option>
  <option value="DN">Đà Nẵng</option>
</select>

Với code trên, “TP. Hồ Chí Minh” sẽ là giá trị được chọn sẵn trong dropdown list.

Thuộc tính disabled

Tương tự thuộc tính disabled của thẻ <select>, bạn cũng có thể vô hiệu hóa một thẻ <option> cụ thể. Tùy chọn đó sẽ hiện ra nhưng có màu xám và người dùng không thể chọn được. Cách này rất hữu ích để tạo ra các nhãn tiêu đề không thể chọn.

<option value="" disabled selected>-- Chọn Tỉnh/Thành phố --</option>

Thẻ optgroup dùng để làm gì?

Khi danh sách của bạn quá dài, việc tìm kiếm một tùy chọn cụ thể có thể gây khó khăn cho người dùng. Đây là lúc thẻ optgroup trong html trở thành cứu cánh. Nó cho phép bạn nhóm các thẻ <option> có liên quan lại với nhau, giúp danh sách trở nên gọn gàng và trực quan hơn rất nhiều.

Cú pháp và thuộc tính label của optgroup

Cú pháp của <optgroup> rất đơn giản. Bạn chỉ cần bọc các thẻ <option> liên quan bằng thẻ <optgroup>. Thuộc tính quan trọng nhất của nó là label, dùng để đặt tên cho nhóm đó. Tên này sẽ hiển thị như một tiêu đề không thể chọn trong danh sách.

<select>
  <optgroup label="Xe Đức">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Xe Nhật">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

Ví dụ: Tạo danh sách chọn xe theo hãng

Hãy xem một ví dụ hoàn chỉnh về việc nhóm xe theo quốc gia sản xuất. Bạn có thấy danh sách này dễ nhìn hơn hẳn không?

<label for="car-brands">Chọn hãng xe bạn yêu thích:</label>
<select name="car-brands" id="car-brands">
  <optgroup label="Hãng xe Đức">
    <option value="mercedes">Mercedes-Benz</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Hãng xe Nhật Bản">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    <option value="mazda">Mazda</option>
  </optgroup>
  <optgroup label="Hãng xe Mỹ">
    <option value="ford">Ford</option>
    <option value="tesla">Tesla</option>
  </optgroup>
</select>

Người dùng giờ đây có thể dễ dàng định vị hãng xe mình muốn chọn dựa theo từng nhóm đã được phân loại rõ ràng.

Tổng hợp các ví dụ thực tế từ cơ bản đến nâng cao

Lý thuyết là vậy, nhưng thực hành mới giúp bạn thực sự nắm vững. WiWeb đã tổng hợp một vài ví dụ từ đơn giản đến phức tạp để bạn có thể áp dụng ngay.

Tạo Dropdown List đơn giản chọn Tỉnh/Thành phố

Đây là trường hợp sử dụng phổ biến nhất. Một danh sách đơn giản cho phép người dùng chọn nơi ở của họ.

<label for="province">Chọn tỉnh thành:</label>
<select id="province" name="province">
  <option value="hanoi">Hà Nội</option>
  <option value="hcm">TP. Hồ Chí Minh</option>
  <option value="danang">Đà Nẵng</option>
  <option value="cantho">Cần Thơ</option>
</select>

Tạo danh sách cho phép chọn nhiều sở thích

Trong ví dụ này, chúng ta sử dụng thuộc tính multiple để người dùng có thể chọn nhiều hơn một sở thích.

<label for="hobbies">Chọn sở thích của bạn (giữ Ctrl để chọn nhiều):</label><br>
<select id="hobbies" name="hobbies" multiple size="4">
  <option value="reading">Đọc sách</option>
  <option value="sports">Chơi thể thao</option>
  <option value="music">Nghe nhạc</option>
  <option value="travel">Du lịch</option>
</select>

Tạo danh sách có lựa chọn mặc định

Giả sử bạn muốn gợi ý một lựa chọn phổ biến nhất cho người dùng, hãy dùng thuộc tính selected.

<label for="payment">Chọn phương thức thanh toán:</label>
<select id="payment" name="payment">
  <option value="cod">Thanh toán khi nhận hàng (COD)</option>
  <option value="momo" selected>Ví điện tử Momo</option>
  <option value="bank">Chuyển khoản ngân hàng</option>
</select>

Sử dụng optgroup để phân loại danh sách món ăn

Với một menu nhà hàng, việc phân loại món ăn giúp người dùng chọn lựa nhanh hơn. Thẻ optgroup là công cụ hoàn hảo cho việc này.

<label for="menu">Chọn món ăn:</label>
<select id="menu" name="menu">
  <optgroup label="Món khai vị">
    <option value="salad">Salad trộn</option>
    <option value="soup">Súp cua</option>
  </optgroup>
  <optgroup label="Món chính">
    <option value="steak">Bò bít tết</option>
    <option value="pasta">Mỳ Ý sốt bò bằm</option>
  </optgroup>
</select>

Lấy giá trị của thẻ select bằng JavaScript

HTML chỉ tạo ra giao diện, để làm cho danh sách thả xuống thực sự “sống động”, bạn cần đến JavaScript. Một trong những tác vụ phổ biến nhất là lấy giá trị của thẻ select mà người dùng đã chọn để xử lý tiếp.

Cách lấy giá trị người dùng đã chọn

Việc này khá đơn giản. Bạn chỉ cần thực hiện 2 bước:

1. Sử dụng document.getElementById('id_cua_the_select') để truy cập đến phần tử <select> thông qua id của nó.
2. Sử dụng thuộc tính .value để lấy giá trị của thẻ <option> đang được chọn.

Vậy là xong! Giá trị trả về chính là nội dung của thuộc tính value trong thẻ <option> mà người dùng đã chọn.

Ví dụ code lấy và hiển thị giá trị được chọn

Hãy xem ví dụ dưới đây. Khi bạn chọn một thành phố và nhấn nút, một hộp thoại sẽ hiện ra thông báo giá trị bạn đã chọn.

<label for="city-choice">Chọn thành phố:</label>
<select id="city-choice">
  <option value="HN">Hà Nội</option>
  <option value="HCM">TP. Hồ Chí Minh</option>
  <option value="DN">Đà Nẵng</option>
</select>

<button type="button" onclick="showValue()">Hiển thị giá trị</button>

<p>Bạn đã chọn: <strong id="result"></strong></p>

<script>
function showValue() {
  // Bước 1: Lấy phần tử select
  var selectElement = document.getElementById('city-choice');

  // Bước 2: Lấy giá trị được chọn
  var selectedValue = selectElement.value;

  // Hiển thị kết quả ra màn hình
  document.getElementById('result').innerText = selectedValue;
}
</script>

Với đoạn mã này, bạn đã có thể dễ dàng lấy và sử dụng lựa chọn của người dùng cho các tác vụ khác trên trang web của mình.

Lời kết

Qua bài viết này, WiWeb hy vọng bạn đã nắm vững cách sử dụng thẻ select và option để tạo ra các danh sách thả xuống chuyên nghiệp và thân thiện với người dùng. Từ những thuộc tính cơ bản đến việc nhóm các lựa chọn với <optgroup> hay tương tác với JavaScript, tất cả đều là những kỹ năng quan trọng trong việc xây dựng website.

Bạn có gặp khó khăn nào khi áp dụng các thẻ này vào dự án của mình không? Hãy để lại bình luận bên dưới, WiWeb sẽ giải đáp giúp bạn nhé!

Nếu bạn đang tìm kiếm một đối tác thiết kế website chuyên nghiệp để hiện thực hóa các ý tưởng của mình, WiWeb luôn sẵn sàng đồng hành. Liên hệ với chúng tôi ngay hôm nay để được tư vấn nhé!