'selected all'和'remove all'with chosen.js

Question

對於選擇菜單插件chosen.js，是否有一種確定的方式來添加'選擇列表中的所有項目'或'刪除列表中的所有項目'功能以多選輸入？在主要分支中，或者在其中一種叉子中？或者有人做過這個之前有一些提示？

Answer 1

應該相當直接的，只是做了「正常」的方式第一：

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

然後觸發liszt:updated事件來更新所選擇的部件，所以整個事情會是這個樣子：

---

更新：對於那些誰不scroll down and check the other answers，該事件被稱爲chosen:updated爲2013年8月發佈的一個版本，請查閱documentation如果疑問。

---

<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'); 
});​ 

工作演示（js代碼是在底部）：http://jsfiddle.net/C7LnL/1/

收緊版本：http://jsfiddle.net/C7LnL/2/

更緊密的版本：http://jsfiddle.net/C7LnL/3/

Answer 2

我錯過日e類似的功能。這會在彈出列表的頂部添加兩個鏈接「全部」和「無」（通過選項uncheck_all_text和select_all_text定製文本）。如果你使用分組，你可能需要編輯它。

$("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; 
      }); 
     } 
    } 
}); 

我也用CSS來限制選擇，選項的情況下，高度有說幾十人：

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

Answer 3

你應該試試這個：

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

Answer 4

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

全部清除

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

選擇所有

Answer 5

試試這個代碼，它的工作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

只是直接的方式結算的選擇：

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

Answer 7

我意識到，這個問題很老了，但我來了因爲我喜歡它的簡單性：

我創建了兩個按鈕（all和none）和flo把他們左右分開，包含我選擇的下拉菜單。該按鈕看起來是這樣的：

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

然後，我添加了一些jQuery來處理按鈕操作：

$('#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'); 
}); 

可能需要一些有關於佈局清理，但它是相當實用的是和我以爲我會分享。