'chọn tất cả' và 'xóa tất cả' bằng selected.js

Question

Đối với plugin trình đơn chọn chosen.js, có cách nào được thiết lập để thêm tính năng 'chọn tất cả các mục trong danh sách' hoặc 'xóa tất cả các mục trong danh sách' sang nhiều lựa chọn không đầu vào? Trong nhánh chính hoặc có lẽ ở một trong các nhánh? Hoặc có ai đó đã làm điều này trước khi có một số mẹo?

Answer 1

Nên khá thẳng về phía trước, chỉ cần làm nó trở thành "bình thường" Cách thứ nhất:

$('.my-select-all').click(function(){ 
    $('#my_select option').prop('selected', true); // Selects all options 
}); 

Sau đó kích hoạt các sự kiện liszt:updated để cập nhật widget chọn, vì vậy toàn bộ điều sẽ giống như thế này:

---

cập nhật: Đối với những người không scroll down and check the other answers, sự kiện này được gọi là chosen:updated như một phiên bản phát hành vào tháng năm 2013. Tham khảo documentation nếu trong nghi ngờ.

---

<select multiple> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<button class="select">Select all</button> 
<button class="deselect">Deselect all</button> 

$('select').chosen(); 
$('.select').click(function(){ 
    $('option').prop('selected', true); 
    $('select').trigger('liszt:updated'); 
}); 
$('.deselect').click(function(){ 
    $('option').prop('selected', false); 
    $('select').trigger('liszt:updated'); 
});​ 

Làm việc bản demo (mã js là ở phía dưới): http://jsfiddle.net/C7LnL/1/

chặt chẽ hơn phiên bản: http://jsfiddle.net/C7LnL/2/

phiên bản Thậm chí chặt chẽ hơn: http://jsfiddle.net/C7LnL/3/

Answer 2

tôi đã bỏ lỡ th e tính năng tương tự. Điều này thêm hai liên kết Tất cả và Không (văn bản có thể tùy chỉnh thông qua các tùy chọn uncheck_all_text và select_all_text) ở đầu danh sách bật lên. Bạn có thể cần chỉnh sửa điều này nếu bạn sử dụng nhóm.

$("select").on("chosen:showing_dropdown", function(evnt, params) { 
    var chosen = params.chosen, 
     $dropdown = $(chosen.dropdown), 
     $field = $(chosen.form_field); 
    if(!chosen.__customButtonsInitilized) { 
     chosen.__customButtonsInitilized = true; 
     var contained = function(el) { 
      var container = document.createElement("div"); 
      container.appendChild(el); 
      return container; 
     } 
     var width = $dropdown.width(); 
     var opts = chosen.options || {}, 
      showBtnsTresshold = opts.disable_select_all_none_buttons_tresshold || 0; 
      optionsCount = $field.children().length, 
      selectAllText = opts.select_all_text || 'All', 
      selectNoneText = opts.uncheck_all_text || 'None'; 
     if(chosen.is_multiple && optionsCount >= showBtnsTresshold) { 
      var selectAllEl = document.createElement("a"), 
       selectAllElContainer = contained(selectAllEl), 
       selectNoneEl = document.createElement("a"), 
       selectNoneElContainer = contained(selectNoneEl); 
      selectAllEl.appendChild(document.createTextNode(selectAllText)); 
      selectNoneEl.appendChild(document.createTextNode(selectNoneText)); 
      $dropdown.prepend("<div class='ui-chosen-spcialbuttons-foot' style='clear:both;border-bottom: 1px solid black;'></div>"); 
      $dropdown.prepend(selectNoneElContainer); 
      $dropdown.prepend(selectAllElContainer); 
      var $selectAllEl = $(selectAllEl), 
       $selectAllElContainer = $(selectAllElContainer), 
       $selectNoneEl = $(selectNoneEl), 
       $selectNoneElContainer = $(selectNoneElContainer); 
      var reservedSpacePerComp = (width - 25)/2; 
      $selectNoneElContainer.addClass("ui-chosen-selectNoneBtnContainer") 
       .css("float", "right").css("padding", "5px 8px 5px 0px") 
       .css("max-width", reservedSpacePerComp+"px") 
       .css("max-height", "15px").css("overflow", "hidden"); 
      $selectAllElContainer.addClass("ui-chosen-selectAllBtnContainer") 
       .css("float", "left").css("padding", "5px 5px 5px 7px") 
       .css("max-width", reservedSpacePerComp+"px") 
       .css("max-height", "15px").css("overflow", "hidden"); 
      $selectAllEl.on("click", function(e) { 
       e.preventDefault(); 
       $field.children().prop('selected', true); 
       $field.trigger('chosen:updated'); 
       return false; 
      }); 
      $selectNoneEl.on("click", function(e) { 
       e.preventDefault(); 
       $field.children().prop('selected', false); 
       $field.trigger('chosen:updated'); 
       return false; 
      }); 
     } 
    } 
}); 

Tôi cũng đang sử dụng một CSS để hạn chế chiều cao của choises chọn trong trường hợp có nói hàng chục trong số họ:

.chosen-choices { 
     max-height: 150px; 
    } 

Answer 3

Bạn nên cố gắng này:

$('#drpdwn').empty(); 
$('#drpdwn').trigger('chosen:updated'); 

Answer 4

$("#ctrlName option:selected").removeAttr("selected").trigger('liszt:updated'); 

xóa tất cả

$("#ctrlName option").attr("selected","selected").trigger('liszt:updated'); 

chọn tất cả

Answer 5

Hãy thử mã này nó sẽ làm việc 100%

// Deselect All 
$('#my_select_box option:selected').removeAttr('selected'); 
$('#my_select_box').trigger('chosen:updated'); 

// Select All 
$('#my_select_box option').prop('selected', true); 
$('#my_select_box').trigger('chosen:updated'); 

Answer 6

Chỉ cần thẳng con đường phía trước của thanh toán bù trừ lựa chọn:

$('select').val(''); 
$('select').val('').trigger("chosen:updated"); 

Answer 7

Tôi nhận ra câu hỏi này là khá cũ, nhưng tôi đi về một vấn đề tương tự và muốn chia sẻ kết quả của tôi, vì tôi thích sự đơn giản của nó:

Tôi đã tạo hai nút (tất cả và không có) và flo ated chúng trái và phải bên trong div chứa dropdown chọn của tôi.Các nút trông giống như thế này:

<button style="float:left;" class="btn" id="iAll">All</button> 
<button style="float:right;" class="btn" id="iNone">None</button> 

Sau đó, tôi đã thêm một số jquery để xử lý các hành động nút:

$('#iAll').on('click', function(e){ 
    e.preventDefault(); 
    $('#iSelect option').prop('selected', true).trigger('chosen:updated'); 
}); 

$('#iNone').on('click', function(e){ 
    e.preventDefault(); 
    $("#iSelect option:selected").removeAttr("selected").trigger('chosen:updated'); 
}); 

Will lẽ cần một số dọn dẹp liên quan đến bố trí, nhưng nó khá chức năng như là và Tôi nghĩ tôi sẽ chia sẻ.