Hộp đa lựa chọn Bootstrap với tính năng chọn tất cả và tìm kiếm

Giới hạn số lượng tùy chọn có thể được chọn thông qua thuộc tính

0. Nó cũng hoạt động cho các nhóm tùy chọn. Tùy chỉnh thông báo hiển thị khi đạt đến giới hạn với

1

---

Trình giữ chỗ

Sử dụng thuộc tính

2 sẽ đặt văn bản giữ chỗ mặc định khi không có gì được chọn. Điều này hoạt động cho cả nhiều hộp chọn và tiêu chuẩn.

Văn bản đã chọn

Đặt thuộc tính

2 trên các tùy chọn riêng lẻ để hiển thị văn bản thay thế khi tùy chọn được chọn

Định dạng văn bản đã chọn

Chỉ định cách lựa chọn được hiển thị với thuộc tính

4 trên nhiều lựa chọn

Các giá trị được hỗ trợ là

• 5. Danh sách các giá trị đã chọn được phân tách bằng dấu phẩy (mặc định)

• 6. Nếu một mục được chọn, thì giá trị tùy chọn sẽ được hiển thị. Nếu nhiều mục được chọn thì số lượng mục đã chọn sẽ hiển thị, e. g.
  7

• 8. Trong đó
  9 là số mục được chọn khi định dạng hiển thị thay đổi từ
  5 thành
  6

• 2. Luôn hiển thị tiêu đề đã chọn (giữ chỗ), bất kể lựa chọn là gì

7

---

lớp nút

Bạn có thể đặt các lớp nút thông qua thuộc tính

3

9

Đánh dấu vào tùy chọn đã chọn

Bạn cũng có thể hiển thị biểu tượng dấu kiểm trên các hộp chọn tiêu chuẩn với lớp

4

Mũi tên menu Bootstrap có thể được thêm vào với lớp

5

Ghi chú. Tính năng này không được dùng nữa và sẽ bị xóa trong v2. 0. 0

Phong cách tùy chọn cá nhân

Các lớp và kiểu được thêm vào các tùy chọn được chuyển vào hộp chọn

_______253

Bề rộng

Bọc các lựa chọn trong các cột lưới hoặc bất kỳ phần tử gốc tùy chỉnh nào để dễ dàng thực thi các độ rộng mong muốn

54

Ngoài ra, hãy sử dụng thuộc tính

6 để đặt độ rộng của vùng chọn. Đặt

6 thành

8 để tự động điều chỉnh độ rộng của vùng chọn thành tùy chọn rộng nhất của nó.

9 tự động điều chỉnh chiều rộng của lựa chọn theo chiều rộng của tùy chọn hiện được chọn. Một giá trị chính xác cũng có thể được chỉ định, e. g. ,

0 hoặc

1

55

---

Biểu tượng

Thêm một biểu tượng vào một tùy chọn hoặc nhóm chọn với thuộc tính

2

Ghi chú. Glyphicons không được bao gồm trong Bootstrap 4. Để sử dụng FontAwesome hoặc thư viện biểu tượng khác, bạn cần đặt

3 thành thứ gì đó khác với

4

56

Nội dung tùy chỉnh

Chèn HTML tùy chỉnh vào tùy chọn với thuộc tính

5

Ghi chú. Tính năng này chèn HTML vào DOM. Theo mặc định, nó được vệ sinh bằng chất khử trùng tích hợp của chúng tôi

56

văn bản phụ

Thêm văn bản phụ vào tùy chọn hoặc nhóm chọn với thuộc tính

6

Với

7 được đặt thành true

56

---

Tùy chọn

8 được đặt thành

8 theo mặc định. Khi

8 được đặt thành

8, menu luôn mở ra để hiển thị nhiều mục mà cửa sổ cho phép mà không bị cắt. Đặt

8 thành

3 để luôn hiển thị tất cả các mục. Kích thước của menu cũng có thể được chỉ định bằng thuộc tính

4

Chỉ định một số cho

4 để chọn số lượng mục tối đa hiển thị trong menu

59

Chọn/bỏ chọn tất cả các tùy chọn

Thêm hai nút vào đầu menu - Chọn tất cả và Bỏ chọn tất cả bằng ________ 06

dải phân cách

Thêm

7 vào một tùy chọn để biến nó thành dải phân cách

56

Thêm tiêu đề vào menu thả xuống, e. g.

8 hoặc

9

59

Thùng đựng hàng

Nối menu chọn vào một phần tử cụ thể, e. g.

0 hoặc

1. Điều này hữu ích nếu phần tử select nằm bên trong một phần tử có

2

3

3 được đặt thành true theo mặc định, tự động xác định xem menu sẽ hiển thị bên trên hay bên dưới hộp chọn hay không. Nếu

3 được đặt thành false, hãy tạo menu thả xuống chọn theo cách thủ công bằng cách thêm lớp

5 vào menu đã chọn