如何以编程方式在 select2 多选下拉列表中添加其他选择而不会丢失现有的选定项目

Posted 2023-05-07

【中文标题】如何以编程方式在 select2 多选下拉列表中添加其他选择而不会丢失现有的选定项目

【英文标题】：How to add an additional selection in select2 multi select dropdown programmatically without losing the existing selected items

【发布时间】：2021-02-12 16:47:04

【问题描述】：

我有一个场景，比如每当用户在多选 select2 下拉列表中选择特定“状态”时，必须自动选择另一个状态。

例如，如果用户选择状态“A”，则也必须选择状态“C”。逻辑是 A 和 C 总是在一起。

我正在寻找执行此操作的选项，目前，我正在捕获 select2:select 事件并检查所选项目是 A 还是 C，如果是，则使用获取所有所选项目

select2Object.select2('data')

然后循环遍历item并获取Value，然后附加状态'C'的值，然后触发change事件。

有没有直接的方法可以做到这一点？例如，如果我选择

select2Object.val("C"); 
select2Object.trigger('change'); 

此代码将清除所有其他选择并仅选择状态“C”。我正在寻找一种解决方案来添加新的选择项而不丢失旧的选择项。

【参考方案1】：

这应该很简单。您需要做的就是保存现有选择，推送新值并触发更改事件。因此，对于您的情况，这应该可行：

// get all selected options (including the one you just selected)
let data = select2Object.val();

/* some logic that determines 'C' should be added */
data.push('C');
select2Object.val(data).trigger('change'); 

【讨论】：

对不起，你在这里提到的答案已经在我的尝试列表中了。我正在寻找一种直接的方法。似乎 select2 没有这样做的直接方法

您可能想在此处查看我的答案-***.com/a/64252695/1307183，其中包含一个通用的可重用函数，可让您执行所需的操作，但是 select2 库没有明确具有您正在寻找的确切功能。

你是对的。直接在 元素上工作就可以了。感谢您的回答

没问题 - 我喜欢 select2 尝试在现有的 <select> 元素之上更多地维护自己作为显示包装器，因此您仍然可以提交表单并直接在这些 DOM 元素上工作，而无需担心依赖 select2 库的特殊代码。