Я пытаюсь заставить мой 'Выбрать все' работать правильно в выпадающем списке select2.Последние два дня я потратил на исчерпывающие сообщения, но до сих пор не могу понять, почему (1) контейнер с флажком select all ('#Container_selectAll') отображается перед нажатием на select2 (то есть он отображается при запуске fiddle),Я хочу, чтобы он показывался только после активации 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");
}
});
});