需要使用Knockout.js在组合框中保留动态创建的选项

Need to retain dynamically created option in combo box using Knockout.js

本文关键字:保留 动态 创建 选项 组合 Knockout js      更新时间:2023-09-26

我有一个代码集,它可以在选择框中动态创建一个"选项"。但是,由于我们使用Knockout,当我选择新创建的选项并单击它时,它会被删除,例如DISAPPARS!呜呜!!!!

所以,下面是创建脚本:

    function createNewGroup()
    {
        var htmlSelect = document.getElementById('groups');
        var optionValue = document.getElementById('newgroupname');
        if (optionValue.value === '')
        {
            alert('Please enter group name.');
            optionValue.focus();
            return false;
        }
        if (isOptionAlreadyExist(htmlSelect, optionValue.value))
        {
            optionValue.value = "";
            alert('Group name already exists.'n'nPlease try again.');
            optionValue.focus();
            return false;
        }
        var selectBoxOption = document.createElement("option");
        selectBoxOption.value = optionValue.value;
        selectBoxOption.text = optionValue.value;
        htmlSelect.add(selectBoxOption, null);
        optionValue.value = "";
        alert("New group has been added successfully.");
        optionValue.focus();
        return true;
    };

由于这是一个可以观察到的KNOCKOUT,所以当我选择它时,如何将它保留在框中,此外,我如何将新值发送回JSON对象。这里有一个例子:

{"组":[

    {
        "groupname" : "Administrator",
        "attr" : {  "id" : "li.attr.node_1",
                    "href" : "#", 
                    "data-bind" : "click: grpMgmt('Administrator');" }
    },
    {
        "groupname" : "Guest",
        "attr" : {  "id" : "li.attr.node_2",
                    "href" : "#", 
                    "data-bind" : "click: grpMgmt('Guest');"  }
    }
]

}

因此,管理员用户可以创建一个新用户,使其看起来像这样:

{"组":[

    {
        "groupname" : "Administrator",
        "attr" : {  "id" : "li.attr.node_1",
                    "href" : "#", 
                    "data-bind" : "click: grpMgmt('Administrator');" }
    },
    {
        "groupname" : "Guest",
        "attr" : {  "id" : "li.attr.node_2",
                    "href" : "#", 
                    "data-bind" : "click: grpMgmt('Guest');"  }
    }
],

"用户":[

    {
        "groupname" : "Joes Users",
        "attr" : {  "id" : "li.attr.node_1",
                    "href" : "#", 
                    "data-bind" : "click: grpMgmt('Joe');" }
    }
]

}

好吧,我暂时停止写作。。。谢谢

如果你正在使用knockout(我实际上看不到),你所需要做的就是将你的选择框绑定到一个可观察的数组,当你需要添加一个新项目时,只需将其推到数组上,knockout就会为你将其添加到列表中。

Knockout本质上应该用更少、更简单的代码来替换您包含的脚本。