Trong các biểu mẫu (forms), select là thành phần quan trọng cho phép người dùng chọn một tùy chọn từ danh sách sẵn có. Bootstrap 5 cung cấp class tiện ích form-select giúp bạn tạo ra danh sách chọn dễ dàng, nhất quán và thân thiện với mọi loại thiết bị. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng và tùy chỉnh thành phần select trong Bootstrap 5, từ danh sách chọn cơ bản, danh sách có nhiều tùy chọn, đến các lựa chọn không thể chọn (disabled) và tùy chỉnh kích thước.

1. Danh sách các lựa chọn (dropdown)

Để tạo một danh sách chọn trong Bootstrap 5, bạn cần sử dụng thẻ <select> với class form-select. Class này sẽ tạo nên giao diện đồng nhất và rõ ràng cho danh sách chọn, phù hợp với các thành phần khác trong form.

Ví dụ danh sách

html
Thử online
<div class="mb-3">
    <label for="countrySelect" class="form-label">Chọn quốc gia</label>
    <select class="form-select" id="countrySelect">
        <option selected>Chọn quốc gia của bạn</option>
        <option value="vn">Việt Nam</option>
        <option value="us">Hoa Kỳ</option>
        <option value="jp">Nhật Bản</option>
        <option value="fr">Pháp</option>
    </select>
</div>

Trong ví dụ này:

  • Class form-select giúp định dạng danh sách chọn.
  • Mục đầu tiên là placeholder (gợi ý), sử dụng thuộc tính selected để mặc định hiển thị trước khi người dùng chọn.

2. Danh sách chọn với nhiều tùy chọn (Multiple Select)

Bootstrap 5 cho phép bạn tạo danh sách chọn cho phép người dùng chọn nhiều giá trị bằng cách thêm thuộc tính multiple vào thẻ <select>. Người dùng có thể chọn nhiều mục trong danh sách bằng cách giữ phím Ctrl (hoặc Cmd trên Mac) khi chọn.

Ví dụ danh sách chọn nhiều tùy chọn

html
Thử online
<div class="mb-3">
    <label for="hobbiesSelect" class="form-label">Chọn sở thích của bạn</label>
    <select class="form-select" id="hobbiesSelect" multiple>
        <option value="reading">Đọc sách</option>
        <option value="traveling">Du lịch</option>
        <option value="music">Nghe nhạc</option>
        <option value="sports">Thể thao</option>
    </select>
</div>

3. Danh sách chọn với tùy chọn không thể chọn (Disabled Option)

Bạn có thể sử dụng thuộc tính disabled cho các mục trong danh sách chọn để vô hiệu hóa các tùy chọn không thể chọn.

Ví dụ với tùy chọn không thể chọn

html
Thử online
<div class="mb-3">
    <label for="paymentSelect" class="form-label">Chọn phương thức thanh toán</label>
    <select class="form-select" id="paymentSelect">
        <option value="credit-card">Thẻ tín dụng</option>
        <option value="paypal">PayPal</option>
        <option disabled>Ví điện tử (Chưa khả dụng)</option>
        <option value="cash">Tiền mặt</option>
    </select>
</div>

Trong ví dụ này, mục “Ví điện tử” không thể chọn được vì có thuộc tính disabled.

4. Kích thước của danh sách chọn

Bootstrap 5 hỗ trợ tùy chỉnh kích thước của thành phần select với các class form-select-sm (nhỏ) và form-select-lg (lớn). Điều này hữu ích khi bạn muốn tạo form với kích thước đồng bộ.

Ví dụ thay đổi kích thước danh sách chọn

html
Thử online
<div class="mb-3">
    <label for="smallSelect" class="form-label">Danh sách chọn nhỏ</label>
    <select class="form-select form-select-sm" id="smallSelect">
        <option selected>Chọn một mục</option>
        <option value="1">Mục 1</option>
        <option value="2">Mục 2</option>
    </select>
</div>

<div class="mb-3">
    <label for="largeSelect" class="form-label">Danh sách chọn lớn</label>
    <select class="form-select form-select-lg" id="largeSelect">
        <option selected>Chọn một mục</option>
        <option value="1">Mục 1</option>
        <option value="2">Mục 2</option>
    </select>
</div>

5. Danh sách chọn có xác thực dữ liệu (Validation)

Bootstrap 5 cung cấp các class tiện ích như is-valid và is-invalid để giúp hiển thị trạng thái xác thực cho danh sách chọn. Điều này giúp người dùng biết liệu lựa chọn của họ có hợp lệ hay không.

Ví dụ với xác thực dữ liệu

html
Thử online
<div class="mb-3">
    <label for="validationSelect" class="form-label">Chọn mức độ hài lòng</label>
    <select class="form-select is-valid" id="validationSelect">
        <option selected>Rất hài lòng</option>
        <option value="1">Hài lòng</option>
        <option value="2">Bình thường</option>
        <option value="3">Không hài lòng</option>
    </select>
    <div class="valid-feedback">Lựa chọn hợp lệ!</div>
</div>

Trong ví dụ này, class is-valid giúp danh sách chọn hiển thị trạng thái hợp lệ với thông báo thành công valid-feedback.

6. Danh sách chọn động với JavaScript

Bootstrap 5 hỗ trợ tích hợp tốt với JavaScript, cho phép bạn tạo danh sách chọn động. Bạn có thể dùng JavaScript để thêm hoặc xóa các tùy chọn trong danh sách, hoặc xử lý sự kiện khi người dùng chọn một mục nào đó.

Ví dụ với JavaScript

html
Thử online
<div class="mb-3">
    <label for="dynamicSelect" class="form-label">Danh sách chọn động</label>
    <select class="form-select" id="dynamicSelect">
        <option selected>Chọn một mục</option>
    </select>
</div>

<button class="btn btn-primary" onclick="addOption()">Thêm mục mới</button>

<script>
function addOption() {
    const select = document.getElementById('dynamicSelect');
    const option = document.createElement('option');
    option.text = 'Mục mới';
    select.add(option);
}
</script>

Trong ví dụ này, nút “Thêm mục mới” sẽ tạo thêm một tùy chọn mới trong danh sách chọn khi được nhấn.

Kết luận

Thành phần select trong Bootstrap 5 cung cấp công cụ linh hoạt và dễ dùng để tạo danh sách chọn đẹp mắt, từ danh sách cơ bản đến các danh sách có xác thực dữ liệu và tùy chỉnh kích thước. Bằng cách sử dụng các tính năng như chọn nhiều mục, tùy chọn không thể chọn, và danh sách động, bạn có thể xây dựng form chuyên nghiệp và tối ưu trải nghiệm người dùng. Hãy áp dụng các ví dụ từ bài viết này để tạo danh sách chọn hiệu quả trên trang web của bạn!