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ọnphươ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
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