时间戳

首页 > 解决方案 > Select2“全选”在容器内无法正常工作

jquery - Select2“全选”在容器内无法正常工作

问题描述

我试图让我的“全选”在 select2 下拉列表中正常工作。我在过去 2 天里用尽了帖子，但仍然不明白为什么（1）在单击 select2 之前显示带有全选复选框（'#Container_selectAll'）的容器（即它在小提琴运行后立即显示） . 我只希望它在 select2 被激活后显示。我认为我的代码正确地在 select2 内部创建了复选框，而不是在外部。另外（2）单击全选复选框后，我必须在激活命令之前再次单击一个国家/地区。为什么？我意识到我对 select2 的理解是新手，但我非常感谢您对此的任何帮助。小提琴：https ://jsfiddle.net/s2jc39hd/

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

<body class='bodyClass'>

  <div class="CountryDropContainer">

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

    <option class="myEuropeCountries" value="UN208a" title="Denmark" >Denmark</option>
    <option class="myEuropeCountries" value="UN233a" title="Estonia" >Estonia</option>
    <option class="myEuropeCountries" value="UN246a" title="Finland" >Finland</option>
    <option class="myEuropeCountries" value="UN348a" title="Hungary" >Hungary</option>
    <option class="myEuropeCountries" value="UN352a" title="Iceland" >Iceland</option>

    </select>
  </div>
</body>

.

$(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({
      closeOnSelect: false,

    }).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', {
            data: data
          });
          return;
        }
        self.trigger('select', {
          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);
      });
    }
  });

});


// =========================

// Initialise dropdown
$(function() {


  $('#CountryBoxesContainerID_prodn').select2MultiCheckboxes({

    // placeholder: "",
    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");
    },
  })



  $(".select2").append('<div id="Container_selectAll"><label id="Outer_selectAll"><input id="selectAll" type="checkbox"><span></span>All</label></div>');



  $("#selectAll").click(function() {

    if ($("#selectAll").is(':checked')) {
      $("#CountryBoxesContainerID_prodn > option").prop("selected", "selected");
      $("#CountryBoxesContainerID_prodn").trigger("change");

    } else {
      $("#CountryBoxesContainerID_prodn > option").removeAttr("selected");
      $("#CountryBoxesContainerID_prodn").trigger("change");
    }
  });

});

标签： jqueryjquery-select2

解决方案

您错误地包含了 select2 和 font-awesome css 文件。

应该：

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

推荐阅读