Bootstrap multiselect chọn tất cả theo mặc định

Tôi là người dùng thay thế thả xuống thân thiện hơn cho tiêu chuẩn với nhiều thuộc tính được kích hoạt. Miễn phí (theo giấy phép WTFPL) Hoạt động theo kiểu kín đáo Nguồn mở hoàn toàn Hỗ trợ bàn phím Cung cấp một số lệnh gọi lại Hoàn toàn có thể tùy chỉnh thông qua CSS Phụ thuộc vào jQuery 1. Hơn 8 mã nhỏ ~8kb HTML rút gọn

...

JavaScript

$('#my-select').multiSelect()

Tùy chọn

NametypedefaultdescriptionafterInitfunctionfunction(container){}Hàm gọi sau khi khởi tạo multiSelect. afterSelectfunctionfunction(values){}Hàm gọi sau khi một mục được chọn. afterDeselectfunctionfunction(values){}Hàm gọi sau khi bỏ chọn một mục. selectableHeaderHTML/TextnullText hoặc HTML để hiển thị trong tiêu đề có thể chọn. lựa chọnHeaderHTML/TextnullText hoặc HTML để hiển thị trong tiêu đề lựa chọn. selectableFooterHTML/TextnullText hoặc HTML để hiển thị ở chân trang có thể chọn. selectionFooterHTML/TextnullText hoặc HTML để hiển thị ở chân trang lựa chọn. lớp disableClassString'disabled'CSS cho các mục bị vô hiệu hóa. selectableOptgroupBooleanfalseClick vào optgroup sẽ chọn tất cả các tùy chọn lồng nhau khi được đặt thành true. keepOrderBooleanfalseCác mục được chọn sẽ được hiển thị theo thứ tự như chúng được chọn. dblClick Boolean false Thay thế sự kiện nhấp chuột mặc định để chọn các mục bằng sự kiện dblclick. cssClassString""Thêm lớp CSS tùy chỉnh vào vùng chứa nhiều lựa chọn

phương pháp


đa lựa chọn (tùy chọn)

Kích hoạt nội dung của bạn dưới dạng nhiều lựa chọn. Chấp nhận một tùy chọn tùy chọn

$('#your-select').multiSelect('select', String|Array);
4

$('#your-select').multiSelect({});

Ghi chú. Bạn phải khởi tạo nhiều lựa chọn với $('#your-select'). multiSelect() trước khi gọi một trong các phương thức sau

multiSelect('chọn', Chuỗi. Mảng)

Chọn mục có giá trị đã cho trong tham số. Giá trị có thể là một chuỗi ('elem_1') khớp với giá trị của tùy chọn hoặc Mảng giá trị (['elem_1', 'elem_42'])

$('#your-select').multiSelect('select', String|Array);

multiSelect('bỏ chọn', Chuỗi. Mảng)

Bỏ chọn mục có giá trị đã cho trong tham số. Giá trị có thể là một chuỗi ('elem_1') khớp với giá trị của tùy chọn hoặc Mảng giá trị (['elem_1', 'elem_42'])

$('#your-select').multiSelect('deselect', String|Array);

đa lựa chọn ('bỏ chọn')

Bỏ chọn tất cả các mục đã chọn trước đó

$('#your-select').multiSelect('select_all');

đa lựa chọn ('select_all')

Chọn tất cả các phần tử

$('#your-select').multiSelect('deselect_all');

đa lựa chọn ('làm mới')

Làm mới đa lựa chọn hiện tại

$('#your-select').multiSelect('refresh');

đa lựa chọn ('addOption', Hash)

Tự động thêm tùy chọn vào đa lựa chọn
Băm tùy chọn được mô tả dưới đây

keytyperequireddesriptionvalueStringtrueGiá trị của tùy chọn tạotextStringtrueVăn bản của tùy chọn tạoindexNumberfalseChỉ mục nơi chèn tùy chọn. Nếu không có, nó sẽ được chèn vào như là tùy chọn cuối cùng. nestedStringfalseNếu có các nhóm chọn bạn có thể chọn nhóm chọn nào bạn muốn chèn tùy chọn. ________số 8_______

bàn phím

keyfunction[  ↓  ]  Mũi tên xuốngChọn mục tiếp theo trong danh sách được đặt tiêu điểm[  ↑  ]  Mũi tên lênChọn mục trước đó trong danh sách được đặt tiêu điểm[ — ]  Dấu cáchThêm/xóa mục tùy thuộc vào danh sách hiện đang được đặt tiêu điểm[ ← ]  Mũi tên trái Tiêu điểm cho danh sách trước đó[ → ]  Mũi tên phải Tiêu điểm


  
  
  
  
  ...
  
$('#pre-selected-options').multiSelect();



  
  
  
  
  ...
  
$('#your-select').multiSelect({});
1


Ghi chú. Tính năng này sẽ không hoạt động nếu có các nhóm lựa chọn trong lựa chọn ban đầu


  
  
  
  
  ...
  
$('#your-select').multiSelect({});
3


$('#your-select').multiSelect({});
4_______2_______5


$('#your-select').multiSelect({});
6
$('#your-select').multiSelect({});
7



  
  
  
  
  ...
  
$('#your-select').multiSelect({});
9

Ghi chú. Bạn cũng có thể tắt từng tùy chọn bằng cách thêm thuộc tính bị vô hiệu hóa vào từng tùy chọn bạn muốn tắt

$('#your-select').multiSelect('select', String|Array);
5


Đầu trang và chân trang tùy chỉnh


  
  
  
  
  ...
  
$('#your-select').multiSelect('select', String|Array);
1


Ghi chú. Tính năng này không được tích hợp sẵn mà phụ thuộc vào một plugin khác. Cá nhân tôi sử dụng thư viện quicksearch tuyệt vời, nhưng bạn có thể sử dụng bất kỳ thư viện nào bạn thích

Sự khác biệt giữa chọn và chọn nhiều trong bootstrap là gì?

Không giống như Select 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àm cách nào để sử dụng bootstrap multiselect js?

Cách sử dụng cơ bản. .
Bao gồm thư viện javascript jQuery và khung Bootstrap của Twitter trên trang của bạn. .
Bao gồm plugin multiselect jQuery bootstrap trên trang, sau thư viện jQuery. .
Tạo một danh sách lựa chọn tiêu chuẩn. .
Gọi hàm trên phần tử chọn để khởi tạo plugin
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.

Làm cách nào để xóa tất cả các tùy chọn khỏi bootstrap multiselect?

mỗi($multiSelectOptions, function(index, element) { element. xóa(); . mỗi (hàm (chỉ mục, phần tử) { phần tử. di dời(); # option 2 $multiSelectOptions. each(function(index, element) { element. remove(); });