Question

我试图让我的所有＆＃39;选择全部＆＃39;在select2下拉列表中正常工作。我花了最后两天耗尽帖子，但仍然无法理解为什么（1）在点击select2之前显示带有全选复选框（＆＃39; #Container_selectAll＆＃39;）的容器（即只要小提琴运行就会显示出来）。我只想在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");
    }
  });

});

Answer 1

您错误地包含了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"/>

选择2＆＃39;全选＆＃39;在容器内不能正常工作

1 个答案: