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

Question

我在这个JSFIDDLE中提供了一个精选2。我如何选择一个选项调用All它将选择除选择字段之外的所有选项，这意味着All选项更像是Select 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有一个未解决的问题，请参阅：select all / select none header

正如'bkdotcom'用户（参见comment）所建议的那样，您可以定义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 = $(
                '<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>

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 demo here

看看它有帮助..

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);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>