所选字段未填充预定义的 selectedOptions答案

【问题标题】：Chosen field not populating with predefined selectedOptions所选字段未填充预定义的 selectedOptions
【发布时间】：2018-12-21 18:39:45
【问题描述】：

在设置选定选项然后更新字段时，我很难让选定的多选字段填充。

在我的应用程序中，我使用 knockout.js 将 observables/observableArrays 绑定到我的字段，并且在所选字段中，选项是对象列表。根据在此字段中选择的选项，我想使用之前选择的对象填充单独的下拉列表。

当我在没有任何预选选项的情况下开始时一切正常，但是当我使用 JavaScript 填充所选选项敲除 observableArray 然后调用所选更新命令时，所选字段保持为空，但单独的下拉列表已成功更新.

HTML：

<label>User(s):</label>
<select class="chosen form-control" multiple data-bind="options: userOptions, selectedOptions: selectedUsers,
            optionsText: function (user){ return user.name}"></select>
<label>Primary User:</label>
<select class="form-control" data-bind="options: selectedUsers, optionsText: 'name', value: primaryUser></select>

淘汰变量：

vs.userOptions: ko.observableArray([]);
vs.selectedUsers: ko.observableArray([]);
vs.primaryUser: ko.observable();

userOptions/selectedUsers 对象：

{
id: -1,
email: "",
name: ""
}

JavaScript：

vs.selectedUsers.removeAll();
$.ajax({
    url: url,
    type: "GET",
    success: function (data) {
        for (var i = 0; i < data.length; i++) {                
            var object = {
                id: data[i].id,
                email: data[i].email,
                name: data[i].name
            };
            vs.selectedUsers.push(object);
            if (data[i].primaryUser) {
                vs.primaryUser(object);
            }
        }
        $(".chosen").trigger("chosen:updated");
    },
    error: function (xhr, status, error) {
        //Handle error...
    }
});

**注意：来自 Ajax GET 调用的数据返回一个包含 pkey、id、email、name 和 primaryUser 的对象数组，其中 primaryUser 是一个布尔值，用于标识它们是否是选定的 primaryUser

【问题讨论】：

标签： jquery html knockout.js jquery-chosen

【解决方案1】：

更新：回到问题并找到有效的修复程序。我不得不调整 ajax 成功函数中的代码：

vs.selectedUsers.removeAll();
$.ajax({
    url: url,
    type: "GET",
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < vs.userOptions().length; j++) {
                if (vs.userOptions()[j].id === data[i].id) {
                    vs.selectedUsers.push(vs.userOptions()[j]);
                    if (data[i].primaryUser) {
                        vs.primaryUser(vs.userOptions()[j]);
                    }
                    break;
                }
            }
        }
        $(".chosen").trigger("chosen:updated");
    },
    error: function (xhr, status, error) {
        //Handle error...
    }
});

【讨论】：