使用selected.js“全选"和“全部删除" [英] 'select all' and 'remove all' with chosen.js

问题描述

对于选择菜单插件 chosen.js ，是否有添加选择所有项目"的既定方法列表中"或删除列表中的所有项目"功能到多选输入?在主分支中还是在其中一个分支中?还是有人做过此事之前有一些提示?

For the select menu plugin chosen.js, is there an established way to add 'select all items in list' or 'remove all items in list' feature to a multiple select input? In the main branch or perhaps in one of the forks? Or has someone done this before has some tips?

推荐答案

应该很简单，首先以正常"方式进行操作即可:

It should be pretty straight forward, just do it the "normal" way first:

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

然后触发liszt:updated事件以更新所选的小部件，因此整个过程看起来像这样:

Then trigger the liszt:updated event to update the chosen widget, so the whole thing would look something like this:

更新:对于不向下滚动并查看其他答案的人，从2013年8月发布的版本开始，该事件称为chosen:updated.如有疑问，请查阅文档

Update: For those who don't scroll down and check the other answers, the event is called chosen:updated as of a version released in August 2013. Consult the documentation if in doubt.

<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/

Working demo (js code is at the bottom): http://jsfiddle.net/C7LnL/1/

更严格的版本: http://jsfiddle.net/C7LnL/2/

更严格的版本: http://jsfiddle.net/C7LnL/3/

这篇关于使用selected.js“全选"和“全部删除"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！