Question

我有一个表单，我使用KnockoutJS动态填充几个链接的SELECT OPTIONS，但是当我提交表单时，所选的值不包含在对服务器的GET请求中。下面是一个示例HTML，它包含常规HTML和Knockout SELECT选项：

<form name=mainForm action="" method="GET" data-bind="submit: onSubmit">
    <input type=hidden name=hiddenId />
    <select name=htmlSelectName>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
    <select name=koSelectName id=koSelectId 
                    data-bind="options: myOptions,
                               optionsCaption: 'Select...',
                               optionsText: 'optionText',
                               value: 'optionId'">                 
    </select>
    <input type="submit" value="Submit">
</form>

<script src="koViewModel/hidden.js" type="text/javascript"></script>

使用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选择选项，而无需复制到隐藏字段？

Answer 1

你在使用KO处理select的方式中混淆了两件事：

value（或selectedOptions用于多选）是包含用户所选值的可观察对象，需要确保将某些内容标记为已选中 - 你是使用optionId但可能意味着使用尚未存在的可观察。
optionsValue用于标记视图模型上的属性，以用作value上的option属性 - 您错过了此属性，但可能意味着使用optionId 。

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

<form name="mainForm" action="" method="GET" data-bind="submit: onSubmit">
  <select name="koSelectName"
          data-bind="options: myOptions,
                     optionsCaption: 'Select...',
                     optionsText: 'optionText',
                     optionsValue: 'optionId',
                     value: 'selectedOption'">                 
  </select>
  <input type="submit" value="Submit">
</form>

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();
  self.onSubmit = function() {
    console.log(document.body.innerHTML);
    return true;
  }
}

ko.applyBindings(new viewModel(selectOptions));

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

1 个答案: