Hướng dẫn bootstrap-multiselect close on click - bootstrap-multiselect đóng khi nhấp

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 ____ 5> và ________ 6>.

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

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

Nội dung tùy chỉnh

Một thùng chứa nội dung tùy chỉnh có lớp

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

Các tùy chọn có thể nhìn thấy

Sử dụng tùy chọn

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

Văn bản thứ cấp

Thêm

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

Tìm kiếm

Đặt tùy chọn

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

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

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

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ử

$('#selectEmp').on('change',function(e) { ....

Multisective với các biểu tượng

Thêm thuộc tính dữ liệu

$('#selectEmp').on('change',function(e) { ....

Thẩm định

Đặt tùy chọn

$('#selectEmp').on('change',function(e) { ....

 272:  if (this.options.multiple) {
 273:      // Simply select additional option.
 274:      $option.prop('selected', true);
+275:      this.$button.click();
       }

$('#selectEmp').on('change',function(e) { ....

$('#selectEmp').on('change',function(e) { ....