Question

我对select2有疑问。是否有可能我们将添加＆＃34;全选＆＃34;在下降本身？

示例：

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

当我选择＆＃34;选择所有＆＃34;该字段将显示＆＃34;选择全部＆＃34;但是在背景上选择a-c ..它似乎是一个技巧..希望你有一个解决方案。

由于

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事件，然后触发{ {1}}循环外的事件，选择一个虚拟的“全选”列表项。（我没试过这个，所以它可能不起作用。）

选择2选择所有下拉选项

1 个答案: