Опция для выбора все не срабатывает в Select2 - PullRequest
Новая
       14

Опция для выбора все не срабатывает в Select2

0 голосов
/ 27 мая 2018

Мне не удается включить опцию «Выбрать все» при ее выборе.Но если после выбора я выбираю другой вариант, то все параметры действительно становятся выбранными.Я, очевидно, пытаюсь все выделить на первый клик.Весь день потратил на это, просматривая посты и перемещая часть моего кода «выбрать все».Я уверен, что продолжаю пропускать что-то глупое.Ценю любую помощь на всех.Соответствующий код находится в конце JS (см. Скрипту). 

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>


  <div class="CountryDropContainer">
  <select id="CountryBoxesContainerID_prodn" name="CountryBoxesContainerID_prodn" class="form-control select2-multiple" multiple="multiple">

<option value="ChooseAll">SELECT ALL</option>  
<option class="myEuropeCountries" value="UN40a" title="Austria" >Austria</option>
<option class="myOceaniaCountries" value="UN36a" title="New Zealand" >New Zealand</option>
<option class="myOceaniaCountries" value="UN554a" title="Australia" >Australia</option>
<option class="myOceaniaCountries" value="UN936a" title="Other Oceania" >Other Oceania</option>

</select>
</div>

. 

    $(function() {

  var S2MultiCheckboxes = function(options, element) {
    var self = this;
    self.options = options;
    self.$element = $(element);
    var values = self.$element.val();
    self.$element.removeAttr('multiple');
    self.select2 = self.$element.select2({

      allowClear: true, // Puts little 'X' in top placeholder  
      //minimumResultsForSearch: -1,
      placeholder: options.placeholder,
      closeOnSelect: false,

      templateSelection: function() {
        return self.options.templateSelection(self.$element.val() || [], $('option', self.$element).length);
      },
      templateResult: function(result) {
        if (result.loading !== undefined)
          return result.text;
        return $('<div>').text(result.text).addClass(self.options.wrapClass);
      }
    }).data('select2');
    self.select2.$results.off("mouseup").on("mouseup", ".select2-results__option[aria-selected]", (function(self) {
      return function(evt) {
        var $this = $(this);

        var data = $this.data('data');

        if ($this.attr('aria-selected') === 'true') {
          self.trigger('unselect', {
            originalEvent: evt,
            data: data
          });
          return;
        }

        self.trigger('select', {
          originalEvent: evt,
          data: data
        });
      }
    })(self.select2));
    self.$element.attr('multiple', 'multiple').val(values).trigger('change.select2');
  }


  $.fn.extend({
    select2MultiCheckboxes: function() {
      var options = $.extend({
        wrapClass: 'wrap'
      }, arguments[0]);

      this.each(function() {
        new S2MultiCheckboxes(options, this);
      });
    }
  });

});



$(function() {

  $('#CountryBoxesContainerID_prodn').select2MultiCheckboxes({
    closeOnSelect: false,
    width: "auto",
    placeholder: '',
    escapeMarkup: function(markup) {
      return markup;
    },

    templateSelection: function(selected, total) {
      return ("Select Country - " + ' ' + "") + selected.length + (" of ") + total + ("\xa0\xa0\xa0\xa0");
    }

  })


  // --------------------------

  // Select ALL

  $('#CountryBoxesContainerID_prodn').on('select2:select', function(e) {
    var data = e.params.data;

    if (e.params.data.text == 'SELECT ALL') {
      $("#CountryBoxesContainerID_prodn option").prop("selected", true);
    }

  });


});

Скрипка: https://jsfiddle.net/dtyhzm3b/

...