Select2全選下拉選項

Question

我有一個關於select2的問題。 是否有可能在下拉列表本身上添加“全選”？

例：

<select>
    <option value='-1'>select all</option>
    <option value='a'>A</option>
    <option value='b'>B</option>
    <option value='c'>C</option>
</select>

當我選擇“全選”時，該字段將顯示“全選”，但是在背景上選擇了交流電。..這似乎是一個把戲。.希望您對此有解決方案。

謝謝

Answer 1

基於http://jsbin.com/seqonozasu/1/edit?html,js,output ，您可以執行以下操作：

$.fn.select2.amd.require([
      'select2/utils',
      'select2/dropdown',
      'select2/dropdown/attachBody'
    ], function (Utils, Dropdown, AttachBody) {
        function SelectAll() { }

        SelectAll.prototype.render = function (decorated) {
            var $rendered = decorated.call(this);
            var self = this;

            var $selectAll = $(
                '<span class="select2-results__option select-all" aria-selected="false">Select All</span>');

            $rendered.find('.select2-dropdown .select2-results').append($selectAll);

            $selectAll.on('click', function (e) {
                var $results = $rendered.find('.select2-results__option[aria-selected=false]:not(.select-all)');

                // Get all results that aren't selected
                $results.each(function () {
                    var $result = $(this);

                    // Get the data object for it
                    var data = $result.data('data');

                    // Trigger the select event
                    self.trigger('select', {
                        data: data
                    });
                });

                self.trigger('close');
            });

            $selectAll.on('mouseenter', function (e) {
                var selectedClass = 'select2-results__option--highlighted';
                var $results = $rendered.find('.select2-results__option[aria-selected=false]:not(.select-all)');

                // Get all results that aren't selected
                $results.each(function () {
                    var $result = $(this);

                    //remove selected class
                    $result.removeClass(selectedClass);
                });

                $(this).addClass(selectedClass);
            });


            $selectAll.on('mouseleave', function (e) {
                var selectedClass = 'select2-results__option--highlighted';

                $(this).removeClass(selectedClass);
            });
            return $rendered;
        };

        $("select").select2({
            placeholder: "Select a User",
            allowClear: true,
            dropdownAdapter: Utils.Decorate(
              Utils.Decorate(
                Dropdown,
                AttachBody
              ),
              SelectAll
            )
        });
    });

連同CSS：

span.select2-results__option.select-all {
    display: block;
}

這會將所有選定的元素添加到select2輸入中。

若要顯示“全選”而不是元素文本，請在$selectAll.click()上遍歷列表元素時，將它們添加到數組中，而不是觸發select事件，然后在循環外觸發select事件，以選擇一個虛擬的“全選”列表項。 （我還沒有嘗試過，所以它可能行不通）。