javascript - Select2 onselect一个选项将选择所有其他选项

Question

我在此 JSFIDDLE 中提供了一个选择 2 .我怎样才能选择一个选项调用 All 它会选择该选择字段内的所有选项，除了它本身，这意味着 All 选项更像是一个全选按钮。并取消选择 All。将取消选择所有选项。我在下面的 jsfiddle 中提供了相同的代码:

HTML:

<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
<option value="all">All</option>
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
        <option value="Option D">Option D</option>
</select>

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 上有一个 Unresolved 问题，请参阅:select all / select none header

根据“bkdotcom”用户的建议(参见 comment)，您可以定义一个 selectAllAdapter 并将其与 Select2(版本 4)一起使用。

检查你的 fiddle 更新: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 = $(
                '<button class="btn btn-xs btn-default" type="button" style="margin-left:6px;"><i class="fa fa-check-square-o"></i> Select All</button>'
            ),
            $unselectAll = $(
                '<button class="btn btn-xs btn-default" type="button" style="margin-left:6px;"><i class="fa fa-square-o"></i> Unselect All</button>'
            ),
            $btnContainer = $('<div style="margin-top:3px;">').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')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
        <option value="Option D">Option D</option>
</select>