当我选择它时,我无法触发“全选”选项。但是如果在选择之后我选择了另一个选项,那么所有选项确实都会被选中。我显然试图在第一次点击时选择所有内容。花了整整一天的时间来浏览帖子并移动我的代码中的“全选”部分。我敢肯定我会遗漏一些愚蠢的东西。感谢任何帮助。相关代码位于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);
}
});
});