选择2 onselect选项将选择所有其他选项

我在这个JSFIDDLE中提供了一个select 2。 如何选择一个选项调用All将选择该选项字段中除自身之外的All选项，这意味着All选项更像是Select All按钮。 并取消选择All 。 将取消选择所有选项。 我从下面的jsfiddle提供相同的代码：

HTML：

  All Option A Option B Option C Option D  

Javascript：

 $('#parent_filter_select2').select2({ placeholder: 'Select' }); 

非常感谢任何帮助，谢谢。

更新：我找到了类似于我想要的东西，但它使用了复选框，所以我想知道如何在All选项而不是复选框上实现它，并且还使用它选择All选项，代码如下：

 $("#checkbox").click(function(){ if($("#checkbox").is(':checked') ){ //select all $("#parent_filter_select2").find('option').prop("selected",true); $("#parent_filter_select2").trigger('change'); } else { //deselect all $("#parent_filter_select2").find('option').prop("selected",false); $("#parent_filter_select2").trigger('change'); } }); 

Answer 1

Select2 github repo上存在一个未解决的问题，请参阅： select all / select none header

根据’bkdotcom’用户的建议（请参阅注释 ），您可以定义selectAllAdapter并将其与Select2（版本4）一起使用。

检查您的小提琴更新： https ： //jsfiddle.net/beaver71/tjvjytp3/

或者这个片段：

 /* Define the adapter so that it's reusable */ $.fn.select2.amd.define('select2/selectAllAdapter', [ 'select2/utils', 'select2/dropdown', 'select2/dropdown/attachBody' ], function (Utils, Dropdown, AttachBody) { function SelectAll() { } SelectAll.prototype.render = function (decorated) { var self = this, $rendered = decorated.call(this), $selectAll = $( ' Select All' ), $unselectAll = $( ' Unselect All' ), $btnContainer = $('
').append($selectAll).append($unselectAll); if (!this.$element.prop("multiple")) { // this isn't a multi-select -> don't add the buttons! return $rendered; } $rendered.find('.select2-dropdown').prepend($btnContainer); $selectAll.on('click', function (e) { var $results = $rendered.find('.select2-results__option[aria-selected=false]'); $results.each(function () { self.trigger('select', { data: $(this).data('data') }); }); self.trigger('close'); }); $unselectAll.on('click', function (e) { var $results = $rendered.find('.select2-results__option[aria-selected=true]'); $results.each(function () { self.trigger('unselect', { data: $(this).data('data') }); }); self.trigger('close'); }); return $rendered; }; return Utils.Decorate( Utils.Decorate( Dropdown, AttachBody ), SelectAll ); }); $('#parent_filter_select2').select2({ placeholder: 'Select', dropdownAdapter: $.fn.select2.amd.require('select2/selectAllAdapter') }); 

     Option A Option B Option C Option D  

Answer 2

您可以使用手动选择选项

 $('#parent_filter_select2').select2('val', values); 

选择选项All来自您的下拉列表。

你可以把values作为javascript数组。

  var values = new Array(); $('#parent_filter_select2').find('option').each(function () { var opt= $(this); var opvalue= opt.attr('value'); if(opvalue != "all") values.push(opvalue); }); 

示例代码在这里。

  $('body').on('change', '#parent_filter_select2', function () { var val = $(this).val(); //alert(val); if(val.indexOf('all') != -1){ $('#parent_filter_select2').select2('val', values); } else{ $('#parent_filter_select2').select2('val', val); } }); 

你可以在这里查看jsfiddle演示

看看它有帮助..

Answer 3

使用以下脚本

 $("#parent_filter_select2 option").click(function () { var val = $(this).attr("value"); if(val == 'all'){ $('#parent_filter_select2 option').prop('selected', true); $('#parent_filter_select2 option[value="all"]').prop('selected', false); } }); 

   All Option A Option B Option C Option D