Jquery 选择2'；选择全部'；容器内工作不正常

我正试图让我的“全选”在select2下拉列表中正常工作。我已经花了2天的时间来阅读这些帖子，但仍然不明白为什么（1）带有全选复选框的容器（“#container_selectAll”）会在单击select2之前显示（即在运行fiddle后立即显示）。我只希望它在select2激活后显示。我认为我的代码正确地在select2内部创建了复选框，而不是在外部。另外（2）单击“全选”复选框后，我必须在激活命令之前再次单击某个国家/地区。为什么？我意识到我对select2的理解是新手，但我非常感谢在这方面的任何帮助。 小提琴：

丹麦
爱沙尼亚
芬兰
匈牙利
冰岛

$（函数（）{
var S2multicheckbox=函数（选项，元素）{
var self=这个；
self.options=选项；
self.$element=$（element）；
var values=self.$element.val（）；
self.$element.removeAttr（'multiple'）；
self.select2=self.$element.select2({
closeOnSelect:false，
}).数据（'select2'）；
self.select2.$results.off（“mouseup”）。on（“mouseup”，”。select2-results\uu选项[aria selected]，（函数（self）{
返回函数（evt）{
var$this=$（this）；
var data=$this.data（'data'）；
if（$this.attr（'aria-selected'）=='true'）{
self.trigger（'unselect'{
数据：数据
});
返回；
}
self.trigger（'select'{
数据：数据
});
}
})（自我选择2）；
self.$element.attr（'multiple'，'multiple'）.val（values）.trigger（'change.select2'）；
}
// -----------------
$.fn.extend({
选择2个多复选框：函数（）{
变量选项=$.extend({
wrapClass:“wrap”
}，参数[0]）；
这个。每个（函数（）{
新的多复选框（选项，本）；
});
}
});
});
// =========================
//初始化下拉列表
$（函数（）{
$（“#CountryBoxesContainerID_prodn”）。选择2个多复选框({
//占位符：“”，
closeOnSelect:false，
宽度：“自动”，
占位符：“”，
转义标记：函数（标记）{
返回标记；
},
模板选择：功能（已选择，总计）{
返回（“选择国家”+“”+”）+selected.length+（“of”）+total+（“\xa0\xa0\xa0\xa0”）；
},
})
$（“.select2”）.append（'All'）；
$（“#选择全部”）。单击（函数（）{
如果（$（“#selectAll”）.是（'：选中的'））{
$（“#CountryBoxesContainerID_prodn>选项”）.prop（“选定”、“选定”）；
$（“#CountryBoxesContainerID_prodn”）。触发器（“更改”）；
}否则{
$（“#CountryBoxesContainerID_prodn>选项”）。删除属性（“选定”）；
$（“#CountryBoxesContainerID_prodn”）。触发器（“更改”）；
}
});
});

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

您将select2 css添加为脚本而不是样式表。这可能不是问题所在，但它也不会有帮助。font-awesome.css。谢谢-请您向这个新手解释一下您的意思。对我来说，样式表意味着CSS——你是说“全选”按钮必须以这种方式添加吗？你有什么例子吗？我会加上它作为“答案”，虽然它可能不能解决你的主要问题。哦，我明白了-非常感谢你指出这一点。不幸的是，正如你所说，这并没有解决问题，尽管我今天仍然学到了一些新东西。

$(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");
    }
  });

});

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