2014-09-09 29 views
6

Tôi đang sử dụng hộp danh sách đa lựa chọn bootstrap. Khi người dùng chọn các tùy chọn trên multiselect nó cho thấy một cách chính xác. Nhưng có một tùy chọn để thiết lập lại các tùy chọn đã chọn trước đó. Khi người dùng nhấp vào nút đặt lại, tự động style=display:none đang thêm vào nút thả xuống và danh sách thả xuống sẽ trở thành vô hình.multiselect bootstrap (làm mới) không hoạt động đúng cách

Đây là mã của tôi

$("#button").click(function() { 

    $('option', $('.multiselect')).each(function (element) { 
     $(this).removeAttr('selected').prop('selected', false); 

    }); 
    $('.multiselect').multiselect('refresh'); 
}); 

Trả lời

27

tùy chọn hữu ích khác là:

  1. $('Id').multiselect('refresh'); - Refreshs các multiselect dựa trên các tùy chọn lựa chọn của chọn.

  2. $('Id').multiselect('destroy'); - Bỏ liên kết toàn bộ plugin.

  3. buildFilter: Tạo bộ lọc.

  4. buildSelectAll: Xây dựng selct tất cả.Kiểm tra xem tất cả các lựa chọn đã được tạo chưa.

  5. $('Id').multiselect('select', ['1', '2', '4']); - Chọn tất cả các tùy chọn của các giá trị đã cho.

  6. clearSelection: Xóa tất cả các mục đã chọn.

  7. $('Id').multiselect('deselect', ['1', '2', '4']); - Bỏ chọn tất cả các tùy chọn của các giá trị đã cho.

  8. $('Id').multiselect('selectAll', true); - Chọn tất cả được bật & tùy chọn hiển thị.

  9. $('Id').multiselect('deselectAll', true); - Bỏ chọn tất cả các tùy chọn.

  10. $('Id').multiselect('rebuild'); - Tạo lại plugin.

  11. $('Id').multiselect('enable'); - Bật tính năng chọn nhiều.

  12. $('Id').multiselect('disable'); - Vô hiệu hóa chọn nhiều.

  13. hasSelectAll: Kiểm tra xem có hộp kiểm chọn tất cả hay không.

  14. updateSelectAll: Cập nhật hộp kiểm chọn tất cả dựa trên hộp kiểm hiện được hiển thị và được chọn.

  15. $('Id').multiselect('updateButtonText'); - Cập nhật văn bản nút và tiêu đề của nút dựa trên các tùy chọn hiện được chọn.

  16. getSelected(): Nhận tất cả các tùy chọn đã chọn.

  17. getOptionByValue(): Nhận tùy chọn chọn theo giá trị của nó.

  18. $('Id').multiselect('dataprovider', options); - Dữ liệu được cung cấp sẽ được sử dụng để tạo danh sách thả xuống.

cho chuyến thăm chi tiết hơn bootstrap-multiselect

+0

cảm ơn bạn của tôi :) – Boldbayar

2

Nhìn vào tài liệu này: http://davidstutz.github.io/bootstrap-multiselect/

Để bỏ chọn việc sử dụng tùy chọn này

$('.multiselect').multiselect('deselect', value) 

Sau đó gọi phương thức refresh

$('.multiselect').multiselect('refresh'); 
+0

Tôi đã bỏ chọn thành công các tùy chọn đã được chọn trước đây nhưng câu hỏi của tôi là khi tôi gọi $ ('. Multiselect'). Multiselect ('refresh'); danh sách tùy chọn trở nên ẩn vì style = display: none được thêm vào nút thả xuống và danh sách thả xuống sẽ trở thành vô hình. – user3408779

+0

Nếu tôi sử dụng 'refresh'a phần tử mới của multiselect được tạo. Tại sao? – Yebach

+0

Bạn có thể chỉ cho tôi rằng trong http://jsfiddle.net –

4

Bootstrap Multiselect không thành công nếu bạn chỉ nhắm mục tiêu lớp như thế này.

$(".multiselect").multiselect("refresh"); 

Điều này xảy ra vì có điều gì đó khác trong plugin có lớp "đa lựa chọn". Bạn phải cho nó biết, rằng nó chỉ là lựa chọn của bạn muốn nhắm mục tiêu.

Làm việc sau đây cho tôi.

$("select.multiselect").multiselect("refresh"); 

Cùng một số cho phương thức "bỏ chọn".

$("select.multiselect").multiselect("deselectAll", false); 
1

cách tiếp cận của tôi là để tiêu diệt các multiselect và sau đó khởi tạo lại nó. Điều đó làm việc cho tôi. Hãy thử:

function initMultiSelect(){ 

     $('#yourMultiselectId').multiselect({ 
     includeSelectAllOption: true, 
     selectAllValue: 'select-all-value' 
     }); 
    } 


    $('#button').click(function(e){ 
     e.preventDefault(); 
     $('#yourMultiselectId').multiselect('destroy'); 
     initMultiSelect(); 
    }); 
Các vấn đề liên quan