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

Это добавляет все выбранные элементы ввода ВЫБ.2.

Чтобы показать «выбрать все», а не текст элемента, когда вы Переберите список элементов на $selectAll.click(), добавьте их в массив, а не вызывая select событие, а затем вызвать select событие вне цикла, чтобы выбрать фиктивный элемент «выбрать все». (Я не пробовал этот бит, так что это может не сработать).