jQuery 使用 selected.js 进行“全选”和“全部删除”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11172269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'select all' and 'remove all' with chosen.js
提问by Petrov
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?
对于选择菜单插件selected.js，是否有一种既定的方法可以将“选择列表中的所有项目”或“删除列表中的所有项目”功能添加到多选输入中？在主分支中还是在其中一个分支中？或者之前有人做过这个有一些提示吗？
回答by Wesley Murch
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
});
Then trigger the liszt:updatedevent to update the chosen widget, so the whole thing would look something like this:
然后触发liszt:updated事件来更新所选的小部件，所以整个事情看起来像这样：
Update: For those who don't scroll down and check the other answers, the event is called chosen:updatedas of a version released in August 2013. Consult the documentationif in doubt.
更新：对于那些不向下滚动并查看其他答案的人，该事件chosen:updated自 2013 年 8 月发布的版本起被调用。如有疑问，请查阅文档。
<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');
});?
Working demo (js code is at the bottom): http://jsfiddle.net/C7LnL/1/
工作演示（js 代码在底部）：http: //jsfiddle.net/C7LnL/1/
Tighter version: http://jsfiddle.net/C7LnL/2/
更严格的版本：http: //jsfiddle.net/C7LnL/2/
Even tighter version: http://jsfiddle.net/C7LnL/3/
更紧凑的版本：http: //jsfiddle.net/C7LnL/3/
回答by Shivam Srivastava
Try this code it will work 100%
试试这个代码，它会 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');
回答by Tommi Ratamaa
I missed the similar feature. This adds the two links All and None (texts customizable through options uncheck_all_text and select_all_text) on the top of the popup list. You may need to edit this if you use grouping.
我错过了类似的功能。这会在弹出列表的顶部添加两个链接“全部”和“无”（通过选项 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;
});
}
}
});
I am also using a CSS to limit the height of the selected choises in case there are say tens of them:
我还使用 CSS 来限制所选 choises 的高度，以防它们有几十个：
.chosen-choices {
max-height: 150px;
}
回答by Dariush Jafari
Just straight forward way of clearing selection:
直接清除选择的方法：
$('select').val('');
$('select').val('').trigger("chosen:updated");
回答by DLux
I realize this question is quite old, but I came upon a similar issue and wanted to share my result, as I like it's simplicity:
我意识到这个问题已经很老了，但我遇到了类似的问题并想分享我的结果，因为我喜欢它的简单性：
I created two buttons (all and none) and floated them left and right inside the div containing my select dropdown. The buttons look something like this:
我创建了两个按钮（全部和无）并将它们在包含我的选择下拉列表的 div 中左右浮动。按钮看起来像这样：
<button style="float:left;" class="btn" id="iAll">All</button>
<button style="float:right;" class="btn" id="iNone">None</button>
Then I added some Jquery to handle the button actions:
然后我添加了一些 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');
});
Will probably need some cleaning up with regards to layout, but it's quite functional as is and I thought I'd share.
可能需要对布局进行一些清理，但它仍然非常实用，我想我会分享。
回答by ümit ?EL?K
$("#ctrlName option:selected").removeAttr("selected").trigger('liszt:updated');
clear all
清除所有
$("#ctrlName option").attr("selected","selected").trigger('liszt:updated');
select all
全选
回答by anujgupta017
You should try this:
你应该试试这个：
$('#drpdwn').empty();
$('#drpdwn').trigger('chosen:updated');
