如何在select2 JavaScript多选择中选择所有选项

How to select all options in select2 JavaScript multiselect

本文关键字：选择 选项 select2 JavaScript      更新时间：2023-09-26

前几天，我试图找出如何在select2 v3.5.1 JavaScript多选择控件中选择所有项目。我尝试了一些方法，但我很难弄清楚如何去做。我只是想选择框中的每个选项，但显然select2没有内置选项来为您选择所有项目。

For select2 4.0.0

var selectedItems = [];
var allOptions = $("#IncludeFieldsMulti option");
allOptions.each(function() {
    selectedItems.push( $(this).val() );
});
$("#IncludeFieldsMulti").val(selectedItems).trigger("change");

这是OP的答案的一个稍微有效的版本:

var selectedItems = [];
var allOptions = $("#IncludeFieldsMulti option");
allOptions.each(function() {
    selectedItems.push( $(this).val() );
});
$("#IncludeFieldsMulti").select2("val", selectedItems);

或者更简洁一点:

var selectedItems = $('#IncludeFieldsMulti option').map(function() { return this.value });
$("#IncludeFieldsMulti").select2("val", selectedItems);

根据这里的讨论:https://github.com/select2/select2/issues/195可以在选项的下拉列表中添加Select All按钮。根据刚才的讨论，一次选择太多会导致浏览器死机。这里我添加了一个功能，如果列出的选项超过25个，则禁用select all按钮:

https://jsfiddle.net/hula_zell/50v60cm6/

选择全选

$("#IncludeFieldsMulti").select2("destroy");
$("#IncludeFieldsMulti").find('option').attr('selected',true);
$("#IncludeFieldsMulti").select2();

取消选择所有

$("#IncludeFieldsMulti").select2("destroy");
$("#IncludeFieldsMulti").find('option').attr('selected',false);
$("#IncludeFieldsMulti").select2();
相关文章：