使用 selected.js 进行“全选”和“全部删除”答案

【问题标题】：'select all' and 'remove all' with chosen.js使用 selected.js 进行“全选”和“全部删除”
【发布时间】：2012-06-25 16:49:40
【问题描述】：

对于选择菜单插件chosen.js，是否有既定方法可以将“选择列表中的所有项目”或“删除列表中的所有项目”功能添加到多选输入？在主分支中还是在其中一个分支中？或者之前有人这样做过有一些提示吗？

【问题讨论】：

标签： jquery jquery-chosen

【解决方案1】：

应该很简单，先按“正常”的方式做：

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

然后触发liszt:updated 事件来更新选择的小部件，所以整个事情看起来像这样：

更新：对于那些不scroll down and check the other answers 的人，从 2013 年 8 月发布的版本开始，该事件称为 chosen:updated。如有疑问，请咨询 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/

【讨论】：

干得好@wesley - 我认为这将是一些类似的东西。帮了大忙！
trigger('liszt:updated') 是关键，即使您停止使用选择的代码仍然有效。
不要忘记 e.preventDefault();否则你会得到“闪烁选择和取消选择”的效果
事件名称不再是 'liszt:updated'，请参阅下面 Jack 的回答。
而不是 $('select').trigger('liszt:updated'); $('select').trigger('chosen:updated');为我工作。

【解决方案2】：

试试这个代码，它会 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');

【讨论】：

【解决方案3】：

我错过了类似的功能。这会在弹出列表的顶部添加两个链接 All 和 None（可通过选项 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;
    }

【讨论】：

这似乎是最好的选择，因为它适应选择。我真的很喜欢这个结果。

【解决方案4】：

清除选择的直接方式：

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

【讨论】：

关闭，但需要更新控件。 $('select').val('').trigger("chosen:updated");

【解决方案5】：

我意识到这个问题已经很老了，但我遇到了一个类似的问题并想分享我的结果，因为我喜欢它的简单性：

我创建了两个按钮（全部和无）并在包含我的选择下拉列表的 div 内左右浮动。按钮看起来像这样：

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

可能需要在布局方面进行一些清理，但它的功能非常强大，我想我会分享。

【讨论】：

【解决方案6】：

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

全部清除

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

全选

【讨论】：

【解决方案7】：

你应该试试这个：

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

【讨论】：

这会从下拉列表中删除所有元素，并防止以后选择任何元素。