Question

我有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

Answer 1

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

如果是这样，问题是当你设置selectedOptions: selectedRoles时，Knockout会覆盖它，因为当选择的值是字符串时，它不能从包含对象的列表中推断出所选项。但是，您可以创建一个计算变量来调整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以获取更多信息。

Select2 with knockout如何在select中显示所选项目？

1 个答案: