Hướng dẫn bootstrap multiselect dropdown with search filter - thả xuống nhiều lựa chọn bootstrap với bộ lọc tìm kiếm
Tôi hiện có 2 lần thả xuống đa chọn trên một trang, một cái được gọi là 'Hazards' và 'HP_Codes' khác. Cả hai đều đưa ra danh sách của họ từ SQL DB và ý tưởng là 'HP_Codes' sẽ được đưa ra dựa trên những gì được chọn trong 'mối nguy hiểm'. Show
Vì vậy, theo lý thuyết, ai đó có thể chọn Hazard1, Hazard2 và Hazard3 và sau đó danh sách thứ hai sẽ tạo ra các tùy chọn liên quan đến 3 Hazard đó (một số tùy chọn có thể giống nhau - các bản sao được xóa). Tôi là một người mới về điều này, do đó ném một mạng, vì vậy tôi bất kỳ đề xuất nào được đánh giá cao. Cho đến nay, tôi đã thử giải pháp cho câu hỏi này (Bootstrap MultiSelect Tùy chọn động dựa trên thả xuống đầu tiên) nhưng tôi đã nhập tất cả các tùy chọn để dừng trang rút HP_Codes từ DB. Có khả năng giữ chúng Được rút ra từ DB sẽ thực sự hữu ích cho các bản cập nhật trong tương lai từ quan điểm trang bảo trì. Điều gì sẽ là cách tốt nhất để đạt được điều này? Chỉnh sửa ở đây là một đoạn của những gì hiện đang nằm trong mẫu của tôi. Để kéo dữ liệu vào MultiSelect từ DB Here is a snippet of what currently sits in my form. To pull the data in to the multiselect from the DB
Sau đó để khởi tạo các plugin
và cuối cùng để đặt mutliselect trong biểu mẫu Bootstrap Multiselect - Ví dụ miễn phí, Mẫu & Hướng dẫnPh đa phản ứng đáp ứng được xây dựng với bootstrap 5. Ví dụ về thả xuống đa chọn với hộp kiểm, hộp sách, tìm kiếm, nút, nhóm, biểu tượng, xác thực, bị vô hiệu hóa Không giống như một lựa chọn tiêu chuẩn, MultiSelect cho phép người dùng chọn nhiều tùy chọn cùng một lúc. Lưu ý: Để tìm hiểu thêm về chọn thành phần chọn và xem tất cả các tùy chọn, phương thức, sự kiện và cách sử dụng nâng cao có sẵn - đọc phần chọn tài liệu & API To learn more about Select component and see all available options, methods, events and advanced usage - read Select Docs & API section Ví dụ cơ bảnThêm thuộc tính Lưu ý: Thành phần này yêu cầu gói MDBootStrap Pro. This component requires MDBootstrap Pro package. Multisective với nhãnCó thể thêm nhãn Chọn bằng cách tạo phần tử với các lớp ____ 4> và ____ 5>. Multisective với trình giữ chỗ Sử dụng tùy chọn Multiselect bị vô hiệu hóaThêm thuộc tính Tùy chọn vô hiệu hóaSử dụng thuộc tính Nút rõ ràng Đặt tùy chọn 0 để hiển thị nút cho phép xóa các lựa chọn hiện tại.Nội dung tùy chỉnhMột thùng chứa nội dung tùy chỉnh có lớp 1 sẽ được hiển thị ở cuối danh sách chọn. Trong ví dụ này, chúng tôi đã thêm một nút.Các tùy chọn có thể nhìn thấySử dụng tùy chọn 2 để thay đổi số lượng tùy chọn sẽ được hiển thị trong Downown Chọn mà không cần cuộn.Văn bản thứ cấpThêm 3 Thuộc tính dữ liệu vào các tùy chọn cụ thể để hiển thị văn bản thứ cấp.Tìm kiếmĐặt tùy chọn 4 thành 0 để bật lọc tùy chọn.Chọn với tìm kiếm bên trong một phương thứcDo bẫy lấy nét trong các phương thức, không thể tập trung các phần tử bên ngoài (như chọn thả xuống). Bạn có thể sử dụng tùy chọn Chọn 6 để giải quyết vấn đề này.
6 chấp nhận bộ chọn của phần tử bên trong thả xuống sẽ được hiển thị. Trong trường hợp này, bộ chọn phải trỏ đến thùng chứa phương thức (phần tử có lớp 8). Điều quan trọng là sử dụng một bộ chọn duy nhất để gán chọn cho một phương thức cụ thể.Nhóm tùy chọnCó thể nhóm các tùy chọn bằng cách sử dụng phần tử 9.Multisective với các biểu tượngThêm thuộc tính dữ liệu 0 vào các tùy chọn cụ thể để hiển thị biểu tượng tùy chọn.Thẩm địnhĐặt tùy chọn 1 thành 0 để bật xác thực thành phần. Các tùy chọn 3 và 4 cho phép sửa đổi các thông báo xác thực. |