带有淘汰赛的Select2如何在选择中显示选定的项目？

Posted 2023-05-07

【中文标题】带有淘汰赛的Select2如何在选择中显示选定的项目？

【英文标题】：Select2 with knockout how to show selected items in select?

【发布时间】：2013-03-26 06:23:52

【问题描述】：

我有 select2 控件，带有多个选择来显示用户的角色，我从服务器获取 selectedRoles 集合，而 select2 只需要选定项目的 id 而不是整个集合。

<select multiple="multiple" 
 data-bind="options: AllRoles, optionsValue: 'Id', optionsText: 'Name', selectedOptions: selectedRole, select2: "></select>

我在 observableArray 中选择了 Roles 作为集合，但 select2 需要字符串集合来显示所选项目。

 AllRoles = ko.observableArray([Id: '111', Name: 'Test', Id: '2222', Name: 'TTTTT']);
 selectedRole = ko.observableArray(["111","2222"]);
 ??? selectedRoles = ko.observableArray([Id: '111', Name: 'Test', Id: '2222', Name: 'TTTTT']);

如果我有单独的字符串数组或者我可以用现有的集合来解决这个问题，最好的方法是什么？

这里是示例fiddle

【问题讨论】：

您可以使用计算出的 observable 创建一个选定 Id 的数组：jsfiddle.net/WGukF/1

【参考方案1】：

我假设问题是您有一个来自服务器的对象数组，并希望将其用作小提琴下方下拉列表中预选的哪些元素的来源？

如果是这样，问题是当您设置selectedOptions: selectedRoles时，knownout将覆盖此选定值时无法从包含对象的列表中推断出选定的项目。但是，您可以创建一个适应 selectedRoles 数组的计算变量。绑定selectedOptions 可以很好地使用它。

self.selectedRolesComp = ko.computed(function() 
    var l = [];
    for(var i = 0; i < self.selectedRoles().length; i++) 
        l.push(self.selectedRoles()[i].Id);
    
    return l;
);

作为小提琴http://jsfiddle.net/WGukF/2/

进一步查看http://knockoutjs.com/documentation/computedObservables.html 了解更多信息。