选择2 onselect选项将选择所有其他选项 [英] Select2 onselect an option will select all other option

问题描述

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

I have a select 2 provided in this JSFIDDLE. How can I onselect an option call All it will select all of the option inside that select field except for itself, meaning the All option is more like a Select All button. and deselecting the All. will deselect all option. I provide the same code from the jsfiddle below :

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：

Javascript :

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

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

Any help is much appreciated, thanks.

更新：我发现类似于我想要的东西，但它使用了复选框，所以我想知道如何在所有选项上实现它一个复选框，以及它也选择所有选项，代码如下：

UPDATE : I found something similar like I've wanted but its using checkbox instead so Im figuring how to implement it on the All option instead of a checkbox, and also with this its selecting the All option too, code below :

$("#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');
      }
  });

推荐答案

Select2 github repo上有一个未解决的问题，请参阅：选择所有/选择无标题

There is an open issue on Select2 github repo, see: select all / select none header

根据'bkdotcom'用户的建议（参见评论 ）你可以定义一个 selectAllAdapter 并将它与Select2（版本4）一起使用。

As suggested by 'bkdotcom' user (see comment) you can define a selectAllAdapter and use it with Select2 (version 4).

检查你的小提琴更新：< a href =https://jsfiddle.net/beaver71/tjvjytp3/ =nofollow noreferrer> https://jsfiddle.net/beaver71/tjvjytp3/

Check your fiddle updated: 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>

这篇关于选择2 onselect选项将选择所有其他选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！