使用selected.js’全选’和’全删’
对于选择菜单插件selected.js ，是否有一种既定方法可以将“选择列表中的所有项目”或“将列表中的所有项目”function添加到多选输入？ 在主分支或者可能是其中一个分叉？ 或者有人这样做之前有一些提示吗？
它应该是非常直接的，只需先按照“正常”的方式进行：
$('.my-select-all').click(function(){ $('#my_select option').prop('selected', true); // Selects all options }); 然后触发liszt:updated事件来更新所选的小部件，所以整个事情看起来像这样：
更新 ：对于那些不向下滚动并查看其他答案的人 ，将调用该事件chosen:updated从2013年8月发布的版本chosen:updated 。如有疑问，请参阅文档 。
$('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/
试试这个代码它将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');
我错过了类似的function。 这会在弹出列表的顶部添加两个链接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(""); $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; }
只是直接清除选择的方式：
$('select').val(''); $('select').val('').trigger("chosen:updated");
我意识到这个问题已经很老了，但是我遇到了类似的问题并想分享我的结果，因为我喜欢它的简单性：
我创建了两个按钮（全部和全部），并在包含我的选择下拉列表的div内左右浮动它们。 按钮看起来像这样：
然后我添加了一些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'); });
可能需要对布局进行一些清理，但它的function非常实用，我认为我会分享。
$("#ctrlName option:selected").removeAttr("selected").trigger('liszt:updated');
清除所有
$("#ctrlName option").attr("selected","selected").trigger('liszt:updated');
全选
你应该试试这个：
$('#drpdwn').empty(); $('#drpdwn').trigger('chosen:updated');