Làm cách nào để tạo nhiều lựa chọn thả xuống trong Bootstrap 5?
|
Bootstrap Multiselect cho phép người dùng chọn nhiều tùy chọn cùng một lúc, không giống như Chọn thông thường, nơi bạn chỉ có thể chọn một tùy chọn. Trong hướng dẫn này, chúng ta sẽ học cách tạo nhiều lựa chọn với Bootstrap 5 Show
Tạo nhiều lựa chọnĐể tạo nhiều lựa chọn, hãy sử dụng thẻ 44 với lớp 45. Thêm các mục trong thẻ 46. Để chọn nhiều mục, hãy sử dụng thuộc tính 47 trong phạm vi 44. Chúng tôi cũng có thể sử dụng thuộc tính 49 để xác định số lượng mục được chọn trong danh sách Ví dụ. Tạo danh sách thả xuống nhiều lựa chọn với nhiều thuộc tínhTrong ví dụ này, chúng tôi đã sử dụng thuộc tính 47 để chọn nhiều mục trong danh sách thả xuống đầu raĐây là đầu ra của mã trên Ví dụ. Tạo danh sách thả xuống nhiều lựa chọn bằng thuộc tính kích thướcTrong ví dụ này, chúng tôi đã sử dụng thuộc tính kích thước để tạo danh sách thả xuống nhiều lựa chọn với bootstrap 5 Phần kết luậnTrong hướng dẫn này, chúng ta đã học cách tạo menu thả xuống nhiều lựa chọn bằng CSS. Ở đây chúng tôi đã sử dụng thuộc tính t làm như vậy. Sử dụng một trong hai thuộc tính kích thước cho nhiều lựa chọn 2 không phải là một tùy chọn cấu hình thực. Nó đề cập đến thuộc tính 2 của 5 plugin được áp dụng trên. Khi có thuộc tính 2 của 5, plugin sẽ sử dụng các hộp kiểm để cho phép nhiều lựa chọn. Nếu không có, plugin sẽ sử dụng các nút radio để cho phép các lựa chọn đơn lẻ. Khi sử dụng plugin cho các lựa chọn đơn lẻ (không có thuộc tính 2), tùy chọn đầu tiên sẽ tự động được chọn nếu không có tùy chọn nào khác được chọn trước. Xem #129 để biết cách tránh hành vi này Ví dụ sau đây cho thấy hành vi mặc định khi thuộc tính 2 bị bỏ qua ________số 8 Nếu nhiều tùy chọn được chọn trước và 5 thiếu thuộc tính 2, thì tùy chọn cuối cùng được đánh dấu là 2 ban đầu sẽ được plugin chọn 2 Ví dụ sau đây cho thấy hành vi mặc định khi có thuộc tính 2. Các tùy chọn được chọn ban đầu sẽ tự động được áp dụng 2 Plugin tự nhiên hỗ trợ 4, tuy nhiên tiêu đề nhóm không thể nhấp được theo mặc định. Xem tùy chọn 5 để biết chi tiết 7 Lưu ý rằng các lớp của 4 được thông qua, cho phép chọn các 4 riêng lẻ một cách dễ dàng (kiểm tra đánh dấu đã tạo để lưu ý sự khác biệt. ) 7 8 XSS injection là một mối đe dọa nghiêm trọng đối với tất cả các ứng dụng web hiện đại. Đặt 8 thành 0 (cài đặt mặc định) sẽ tạo đa lựa chọn an toàn XSS 4 Mặt khác, khi thiết lập 8 thành 2, plugin sẽ hỗ trợ HTML trong vòng 3s 4 5 Nếu được đặt thành 2, thì 4 sẽ có thể nhấp được, cho phép dễ dàng chọn nhiều tùy chọn thuộc cùng một nhóm 5 không khả dụng trong chế độ chọn đơn, tôi. e. khi không có thuộc tính 2 Khi sử dụng 9, các lớp được chọn cũng được áp dụng trên các nhóm tùy chọn Lưu ý rằng tùy chọn này cũng hoạt động với các tùy chọn bị vô hiệu hóa Lưu ý rằng hành vi của 200 thay đổi. Bất cứ khi nào một nhóm chọn được thay đổi/nhấp chuột, sự kiện 200 sẽ được kích hoạt với tất cả các tùy chọn bị ảnh hưởng làm tham số đầu tiên Lưu ý rằng các 4 được chọn tự động nếu toàn bộ nhóm được chọn theo mặc định 203 Nếu được đặt thành 2, của 4 sẽ có thể thu gọn Cả hai tùy chọn, 203 và 5, cũng có thể được kết hợp Tuy nhiên, xin lưu ý rằng hành vi kết hợp cả hai tùy chọn có thể không như mong đợi - hãy thử với ví dụ dưới đây để có được một số trực giác Các nhóm có thể được thu gọn theo mặc định bằng thủ thuật đơn giản sau 23 Kết hợp những điều trên với 208 và 209 Một lần nữa, lưu ý rằng hành vi kết hợp 203, 203, 208 và 209 chưa được kiểm tra kỹ lưỡng. Thử nghiệm với ví dụ dưới đây để có được một số trực giác 214 Tùy chọn này sẽ thu gọn tất cả các 4 theo mặc định Ngoài ra còn có một ví dụ trong phần trình bày một cách khác để thu gọn 216 theo mặc định 25 217 Nếu được đặt thành 2, đa lựa chọn sẽ bị tắt nếu không có tùy chọn nào được cung cấp 219 Văn bản hiển thị nếu đa lựa chọn bị tắt. Lưu ý rằng tùy chọn này được đặt thành chuỗi trống 220 theo mặc định, nghĩa là 221 được hiển thị nếu đa lựa chọn bị tắt và không có tùy chọn nào được chọn Tùy chọn 219 cũng hoạt động khi 5 cơ bản bị tắt 28 Lưu ý rằng các tùy chọn đã chọn sẽ vẫn được hiển thị 28 224 Danh sách thả xuống cũng có thể được thả xuống ngay 225 Trình đơn thả xuống cũng có thể được thả lên. Lưu ý rằng bạn cũng nên đặt 226. Plugin tính toán chiều cao cần thiết của danh sách thả xuống và lấy giá trị tối thiểu được tính và 226 Lưu ý rằng tính năng này đã được giới thiệu trong #594 và được biết là có vấn đề tùy thuộc vào môi trường Bạn có thể tìm thấy ví dụ về cách tự động thêm tùy chọn 225 khi cuộn trong 21 226 Chiều cao tối đa của menu thả xuống. Điều này rất hữu ích khi sử dụng plugin có nhiều tùy chọn Multiselect ở bên trái sử dụng 226 được đặt thành 231. Mặt khác, đa lựa chọn ở bên phải không sử dụng 226 233 Tên được sử dụng cho các hộp kiểm được tạo. Xem để biết chi tiết 200 Một chức năng được kích hoạt trong sự kiện thay đổi của các tùy chọn. Lưu ý rằng sự kiện không được kích hoạt khi chọn hoặc bỏ chọn các tùy chọn bằng phương pháp 5 và 236 do plugin cung cấp Lưu ý rằng hành vi của 200 thay đổi khi đặt 5 thành 2 240 Một chức năng được kích hoạt khi đa lựa chọn khởi tạo xong 25 241 Một cuộc gọi lại được gọi khi danh sách thả xuống được hiển thị Tùy chọn 241 không khả dụng khi sử dụng Twitter Bootstrap 2. 3 243 Một cuộc gọi lại được gọi khi menu thả xuống bị đóng Tùy chọn 243 không khả dụng khi sử dụng Twitter Bootstrap 2. 3 245 Một cuộc gọi lại được gọi sau khi danh sách thả xuống đã được hiển thị Tùy chọn 245 không khả dụng khi sử dụng Twitter Bootstrap 2. 3 247 Một cuộc gọi lại được gọi sau khi danh sách thả xuống đã bị đóng Tùy chọn 247 không khả dụng khi sử dụng Twitter Bootstrap 2. 3 249 Lớp của nút đa lựa chọn 250 Kế thừa lớp của nút từ lựa chọn ban đầu 251 Vùng chứa giữ cả nút cũng như trình đơn thả xuống 252 Độ rộng của nút chọn nhiều có thể được cố định bằng tùy chọn này Trên thực tế, 252 mô tả chiều rộng của vùng chứa 254 và chiều rộng của 255 được đặt thành 256 Lưu ý rằng nếu văn bản trong tiêu đề nút quá dài, nó sẽ bị cắt bớt và sử dụng dấu chấm lửng Điều này cũng làm việc cho các tùy chọn dài 257 Một cuộc gọi lại chỉ định văn bản hiển thị trên nút phụ thuộc vào các tùy chọn hiện được chọn Cuộc gọi lại lấy 258 hiện được chọn và 5 làm đối số và trả về chuỗi được hiển thị dưới dạng văn bản nút. Hàm gọi lại 257 mặc định trả về 221 trong trường hợp không có tùy chọn nào được chọn, 262 trong trường hợp có nhiều hơn tùy chọn 263 được chọn và tên của các tùy chọn đã chọn nếu ít hơn tùy chọn 263 được chọn 265 Một cuộc gọi lại chỉ định tiêu đề của nút Cuộc gọi lại lấy 258 hiện được chọn và 5 làm đối số và trả về tiêu đề của nút dưới dạng chuỗi. Cuộc gọi lại 265 mặc định trả về 221 trong trường hợp không có tùy chọn nào được chọn và tên của các tùy chọn đã chọn của ít hơn tùy chọn 263 được chọn. Nếu nhiều hơn 263 tùy chọn được chọn, thì 262 được trả về 221 Văn bản hiển thị khi không có tùy chọn nào được chọn. Tùy chọn này được sử dụng trong các hàm 257 và 265 mặc định 262 Văn bản được hiển thị nếu nhiều hơn 1263 tùy chọn được chọn. Tùy chọn này được sử dụng bởi các cuộc gọi lại 257 và 265 mặc định 280 280 là văn bản được hiển thị nếu tất cả các tùy chọn được chọn. Bạn có thể tắt hiển thị 280 bằng cách đặt nó thành false Tùy chọn này có thể hữu ích khi kết hợp với 209 Lưu ý rằng 280 không được hiển thị nếu chỉ có một tùy chọn 263 Tùy chọn này được sử dụng bởi các hàm 257 và 265 để xác định xem có quá nhiều tùy chọn sẽ được hiển thị hay không Có thể tắt chức năng này bằng cách đặt 263 thành 289 290 Đặt dấu tách cho danh sách các mục đã chọn để di chuột qua. Mặc định là ','. Đặt thành '\n' để hiển thị gọn gàng hơn 291 Một cuộc gọi lại được sử dụng để xác định nhãn của các tùy chọn 28 292 Một cuộc gọi lại được sử dụng để xác định các lớp cho các phần tử 293 có chứa các hộp kiểm và nhãn 76 9 (Các) lớp được áp dụng trên các tùy chọn đã chọn 77 209 Đặt thành 2 hoặc 0 để bật hoặc tắt tùy chọn chọn tất cả Để xem ví dụ sử dụng cả tùy chọn chọn tất cả và bộ lọc, hãy xem tài liệu về tùy chọn 208 Tùy chọn 209 cũng có thể được sử dụng kết hợp với 4's Lưu ý rằng select all không kích hoạt sự kiện 200 và chỉ kích hoạt sự kiện 202 Phần tử chọn tất cả tự nhiên tôn trọng các phần tử bị vô hiệu hóa 203 Đặt cả 209 và 208 thành 2, tùy chọn chọn tất cả luôn chỉ chọn tùy chọn hiển thị. Với cài đặt 203 thành 0, hành vi này được thay đổi sao cho luôn luôn chọn tất cả các tùy chọn (bất kể chúng có hiển thị hay không) 209 Văn bản hiển thị cho tùy chọn chọn tất cả 210 Tùy chọn chọn tất cả được thêm vào dưới dạng 3 bổ sung trong 5. Để phân biệt tùy chọn này với các tùy chọn ban đầu, giá trị được sử dụng cho tùy chọn chọn tất cả có thể được định cấu hình bằng tùy chọn 210 Tùy chọn 210 thường phải là một chuỗi, tuy nhiên, các giá trị số cũng hoạt động tốt 215 Tùy chọn này cho phép kiểm soát tên được đặt cho tùy chọn chọn tất cả. Xem để biết thêm chi tiết 216 Nếu được đặt thành 2 (mặc định), số lượng tùy chọn đã chọn sẽ được hiển thị trong dấu ngoặc đơn khi tất cả các tùy chọn được chọn. Ví dụ dưới đây cho thấy hành vi của selectalloption với 216 được đặt thành 0 202 Chức năng này được kích hoạt khi tùy chọn chọn tất cả được sử dụng để chọn tất cả các tùy chọn. Lưu ý rằng điều này cũng có thể được kích hoạt thủ công bằng phương pháp 221 Lưu ý rằng tùy chọn 200 không được kích hoạt khi (bỏ) chọn tất cả các tùy chọn bằng tùy chọn chọn tất cả Tùy chọn 202 chỉ được kích hoạt nếu tùy chọn chọn tất cả được chọn; 224 Chức năng này được kích hoạt khi tùy chọn chọn tất cả được sử dụng để bỏ chọn tất cả các tùy chọn. Lưu ý rằng điều này cũng có thể được kích hoạt thủ công bằng phương pháp 225 Lưu ý rằng tùy chọn 200 không được kích hoạt khi (bỏ) chọn tất cả các tùy chọn bằng tùy chọn chọn tất cả Tùy chọn 224 chỉ được kích hoạt nếu tùy chọn chọn tất cả không được chọn; 208 Đặt thành 2 hoặc 0 để bật hoặc tắt bộ lọc. Bộ lọc 231 sẽ được thêm vào để lọc động tất cả các tùy chọn Tùy chọn 208 có thể dễ dàng được sử dụng kết hợp với tùy chọn 209 Tùy chọn 208 cũng có thể được sử dụng kết hợp với 4's Các 4 có thể nhấp cũng được hỗ trợ Cuối cùng, tùy chọn này cũng có thể được sử dụng cùng với 200 hoặc các sự kiện tương tự 238 Bộ lọc như được định cấu hình ở trên sẽ sử dụng tính năng lọc phân biệt chữ hoa chữ thường, bằng cách đặt 238 thành 2, hành vi này có thể được thay đổi để sử dụng tính năng lọc không phân biệt chữ hoa chữ thường 241 Đặt thành 2 để bật tính năng lọc giá trị đầy đủ, nghĩa là tất cả các tùy chọn được hiển thị khi truy vấn là tiền tố của. Một ví dụ được đưa ra ở đây. #555 243 Các tùy chọn được lọc dựa trên 244 của chúng. Hành vi này có thể được thay đổi để sử dụng 245 của các tùy chọn hoặc 246 văn bản và giá trị Trong ví dụ này, các tùy chọn có giá trị từ 247 đến 248. Thay vì tìm kiếm văn bản của các tùy chọn, giá trị của các tùy chọn được tìm kiếm Làm cách nào tôi có thể tạo nhiều danh sách thả xuống trong bootstrap?Không, không thể có hai menu thả xuống trong cùng một div . Chúng cần được tách biệt vì mã để chuyển đổi chúng tìm kiếm phần tử đầu tiên trong div cha của nút/neo. Vì vậy, nếu chúng ở trong cùng một div cha thì chỉ cái đầu tiên sẽ được bật.
Làm cách nào để tạo menu thả xuống nhiều lựa chọn trong Bootstrap 4?Bắt đầu . Liên kết các tập tin cần thiết. Đầu tiên, thư viện jQuery cần được đưa vào. . Tạo một Lựa chọn. Bây giờ, chỉ cần sử dụng HTML để tạo đầu vào đã chọn mà bạn muốn chuyển thành đa lựa chọn. . Gọi trình cắm. Cuối cùng, chỉ cần gọi plugin theo lựa chọn của bạn Menu thả xuống nhiều lựa chọn là gì?Danh sách thả xuống nhiều lựa chọn được được sử dụng khi người dùng muốn lưu trữ nhiều giá trị cho cùng một bản ghi , trong khi danh sách thả xuống được sử dụng để lưu trữ một . Bạn có thể tạo các danh mục tùy chỉnh của danh sách thả xuống hoặc danh sách thả xuống nhiều lựa chọn và xác định các mục trong mỗi danh mục.
Đa lựa chọn bootstrap là gì?Bootstrap Multiselect là một plugin dựa trên jQuery cho phép người dùng đánh dấu vào nhiều tùy chọn từ một lựa chọn Bootstrap tiêu chuẩn . Việc triển khai nó khá đơn giản và đổi lại mang lại rất nhiều giá trị UX. Ví dụ về việc sử dụng Bootstrap Multiselect. Lựa chọn thành phần trong hệ thống giao bánh pizza. |
