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'.

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

// Method to bind Dropdown
function fill_hazards_select_box($con)
{ 
 $output = '';
 $query=mysqli_query($con,"SELECT hazards FROM Chemilist_states");
    $cnt=1;
    while($row=mysqli_fetch_array($query))
    {
    $output .= "";
    }

 return $output;
}

function fill_hp_codes_select_box($con)
{ 
 $output = '';
 $query=mysqli_query($con,"SELECT hp_codes FROM Chemilist_hazards");
    $cnt=1;
    while($row=mysqli_fetch_array($query))
    {
    $output .= "";
    }

 return $output;
}

$month = date('m');
$day = date('d');
$year = date('Y');

$today = $year . '-' . $month . '-' . $day;
?>

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ẫn

Ph đ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ản

Thêm thuộc tính multiple vào phần tử chọn để kích hoạt nhiều chế độ.

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ãn

Có 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 placeholder để đặt trình giữ chỗ để chọn đầu vào. Người giữ chỗ sẽ được hiển thị khi đầu vào được tập trung và không có tùy chọn nào được chọn.


Multiselect bị vô hiệu hóa

Thêm thuộc tính disabled vào phần tử chọn để vô hiệu hóa đầu vào Chọn.


Tùy chọn vô hiệu hóa

Sử dụng thuộc tính disabled trên phần tử tùy chọn để vô hiệu hóa tùy chọn cụ thể.


Nút rõ ràng

Đặt tùy chọn clearButton thành

    

        
       
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ỉnh

Mộ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ấy

Sử 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ấp

Thê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ức

Do 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ọn

Có 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ượng

Thê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.