如何为Kendo MultiSelect用另一数据源填充预选值？

首先先修正你初始化代码里的小问题：dataSource: dataforselection后面缺了个逗号，补上才不会出现语法错误。

一、用预选数据源设置MultiSelect的选中值 #

假设你的预选数据源叫preselectedData，它和dataforselection共享value字段（对应你配置的dataValueField: "value"），只需要提取预选数据里的value字段值组成数组，就能给MultiSelect赋值：

方式1：初始化时直接赋值 #

// 从预选数据源提取对应value字段的数组
const preselectedValues = preselectedData.map(item => item.value);

$("#multiselect").kendoMultiSelect({
   dataTextField: "text",
   dataValueField: "value",
   dataSource: dataforselection, // 补上缺失的逗号
   value: preselectedValues,
   valuePrimitive: true,
   autoBind: false,
});
// 因为autoBind设为false，需要手动触发数据源加载才能显示下拉选项
$("#multiselect").data("kendoMultiSelect").dataSource.read();

方式2：初始化后动态设置（适合异步获取预选数据的场景） #

const multiSelectInstance = $("#multiselect").data("kendoMultiSelect");
// 先加载可选数据源
multiSelectInstance.dataSource.read();
// 提取预选值数组后设置
const preselectedValues = preselectedData.map(item => item.value);
multiSelectInstance.value(preselectedValues);

二、同步预选数据源的增删操作 #

因为你开启了valuePrimitive: true，MultiSelect的value是原始值数组（比如字符串/数字数组），增删操作需要同时更新预选数据源和MultiSelect的选中状态：

1. 新增预选项 #

比如把下拉中选中的项添加到预选数据源：

const multiSelectInstance = $("#multiselect").data("kendoMultiSelect");
// 获取当前下拉选中的项
const selectedDropdownItem = multiSelectInstance.dataItem(multiSelectInstance.select());

// 避免重复添加
const isAlreadyInPreselected = preselectedData.some(item => item.value === selectedDropdownItem.value);
if (!isAlreadyInPreselected) {
  // 更新预选数据源
  preselectedData.push({ value: selectedDropdownItem.value, text: selectedDropdownItem.text });
  // 更新MultiSelect选中值
  const currentValues = multiSelectInstance.value();
  multiSelectInstance.value([...currentValues, selectedDropdownItem.value]);
}

2. 删除预选项 #

比如删除指定value的预选项：

const multiSelectInstance = $("#multiselect").data("kendoMultiSelect");
const valueToDelete = "要删除的value值";

// 过滤更新预选数据源
preselectedData = preselectedData.filter(item => item.value !== valueToDelete);
// 过滤更新MultiSelect选中值
const currentValues = multiSelectInstance.value();
multiSelectInstance.value(currentValues.filter(val => val !== valueToDelete));

3. 通过组件change事件自动同步 #

如果希望用户手动在MultiSelect中增删选中项时，自动同步预选数据源，可以绑定change事件：

$("#multiselect").kendoMultiSelect({
   // 其他配置...
   change: function() {
     const selectedValues = this.value();
     // 从可选数据源中筛选出选中项，直接更新预选数据源
     preselectedData = dataforselection.filter(item => selectedValues.includes(item.value));
   }
});

内容的提问来源于stack exchange，提问作者nick glav