我在此提供了选择 2JSFIDDLE https://jsfiddle.net/kLw8rnre/2/。我如何选择一个期权呼叫All它将选择该选择字段中除自身之外的所有选项，这意味着All选项更像是“全选”按钮。并取消选择All。将取消选择所有选项。我在下面的 jsfiddle 中提供了相同的代码：
HTML :
<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
<option value="all">All</option>
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
<option value="Option D">Option D</option>
</select>
JavaScript：
$('#parent_filter_select2').select2({
placeholder: 'Select'
});
非常感谢任何帮助，谢谢。
UPDATE :我发现了类似我想要的东西，但它使用复选框，所以我想知道如何在All选项而不是复选框，并且还可以选择All选项也一样，代码如下：
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){ //select all
$("#parent_filter_select2").find('option').prop("selected",true);
$("#parent_filter_select2").trigger('change');
} else { //deselect all
$("#parent_filter_select2").find('option').prop("selected",false);
$("#parent_filter_select2").trigger('change');
}
});
Select2 github 存储库上有一个未解决的问题，请参阅：全选/全选标题 https://github.com/select2/select2/issues/195
根据“bkdotcom”用户的建议（参见comment https://github.com/select2/select2/issues/195#issuecomment-240130634）你可以定义一个selectAllAdapter并将其与 Select2（版本 4）一起使用。
检查你的小提琴更新：https://jsfiddle.net/beaver71/tjvjytp3/ https://jsfiddle.net/beaver71/tjvjytp3/
或这个片段：
/*
Define the adapter so that it's reusable
*/
$.fn.select2.amd.define('select2/selectAllAdapter', [
'select2/utils',
'select2/dropdown',
'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {
function SelectAll() { }
SelectAll.prototype.render = function (decorated) {
var self = this,
$rendered = decorated.call(this),
$selectAll = $(
'<button class="btn btn-xs btn-default" type="button" style="margin-left:6px;"><i class="fa fa-check-square-o"></i> Select All</button>'
),
$unselectAll = $(
'<button class="btn btn-xs btn-default" type="button" style="margin-left:6px;"><i class="fa fa-square-o"></i> Unselect All</button>'
),
$btnContainer = $('<div style="margin-top:3px;">').append($selectAll).append($unselectAll);
if (!this.$element.prop("multiple")) {
// this isn't a multi-select -> don't add the buttons!
return $rendered;
}
$rendered.find('.select2-dropdown').prepend($btnContainer);
$selectAll.on('click', function (e) {
var $results = $rendered.find('.select2-results__option[aria-selected=false]');
$results.each(function () {
self.trigger('select', {
data: $(this).data('data')
});
});
self.trigger('close');
});
$unselectAll.on('click', function (e) {
var $results = $rendered.find('.select2-results__option[aria-selected=true]');
$results.each(function () {
self.trigger('unselect', {
data: $(this).data('data')
});
});
self.trigger('close');
});
return $rendered;
};
return Utils.Decorate(
Utils.Decorate(
Dropdown,
AttachBody
),
SelectAll
);
});
$('#parent_filter_select2').select2({
placeholder: 'Select',
dropdownAdapter: $.fn.select2.amd.require('select2/selectAllAdapter')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
<option value="Option A">Option A</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
<option value="Option D">Option D</option>
</select>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
