Forms 选择HTML表单提交后缺少的选项

我有一个表单，其中我使用KnockoutJS动态填充多个链式选择选项，但是当我提交表单时，所选值不包括在服务器的GET请求中。下面是一个示例HTML，其中包含常规HTML和淘汰选择选项：

一个
两个
三

通过GET请求，您可以看到htmlSelect中的参数被设置回服务器，但是默认情况下不会返回koSelect部分。我编写了一个onSubmit绑定，它将koSelect值复制到一个隐藏字段，并将其发送回服务器：

var selectOptions = [
    {
        optionId : "A100",
        optionText: "Option A",
    },
    {
        optionId : "B200",
        optionText: "Option B",
    }
];

var viewModel = function(someOptions) {
    var self = this;
    self.myOptions = someOptions;
    self.selectedOption = ko.observable();
    console.log("Sending Option: " + self.selectedOption);

    self.onSubmit = function() {
        var k = document.getElementById("koSelectId");

        document.mainForm.hiddenId.value =  selectOptions[k.selectedIndex-1].optionId;

        alert("Got Knockout Option ("+k.selectedIndex+"): " + k.options[k.selectedIndex].text);
        console.log("Got Knockout Option ("+k.selectedIndex+"): " + k.options[k.selectedIndex].text);
        console.log("Got Knockout Value ("+k.selectedIndex+"): " + document.mainForm.hiddenId.value);
        confirm("Click OK after reviewing the console output.  Then examine the GET params.");
        return true;
    }
}

ko.applyBindings(new viewModel(selectOptions));

GET查询字符串的结果为：

myapp?hiddenId=A100&htmlSelectName=Three&koSelectName=

---

但是，有没有一种更简单的方法可以在提交时返回KO select选项，而无需复制到隐藏字段？

您在处理KO的

选择时混淆了两件事：


value
（或
selectedOptions
用于多选）是保存用户所选值的可观察值，需要确保某些内容标记为选中-您使用的是
选项ID
，但可能是要使用尚未存在的可观察值
选项value
用于将视图模型上的属性标记为
选项
上的
值
属性-您缺少此属性，但可能打算使用
选项ID

下面是一个按预期工作的示例：



var selectOptions=[
{
选项ID：“A100”，
optionText：“选项A”，
},
{
选项ID：“B200”，
optionText：“选项B”，
}
];
var viewModel=函数（someOptions）{
var self=这个；
self.myOptions=someOptions；
self.selectedOption=ko.observable（）；
self.onSubmit=函数（）{
log（document.body.innerHTML）；
返回true；
}
}
应用绑定（新视图模型（选择选项））；