使用Knockout实现Drop Down的问题

Question

我正在尝试用一个下拉菜单替换现有网站中的一个文本框，下拉菜单中的选项很少。一切正常，除了当用户点击注册时，值没有被存储/注册。但对于文本框，它工作得很好。请看下面我为下拉菜单做的代码：

</label>
<label class="label-4 lcol1" for="d_name-suffix"><small>(optional)</small>
<select id="d_name-suffix" style="width:auto; height:auto" data-bind="options: $root.nameSuffix, value: nameSuffix, optionsText: 'options1'" />
</label>

JS：

self.nameSuffix = ko.observable([
{ options1: "Mr" },
{ options1: "Mrs" },
{ options1: "Miss" }
]).extend({ pattern: NineElevenRegistries.inputValidation.name });

下面是为textbox实现的代码：

self.nameSuffix = ko.observable().extend({
maxLength: NineElevenRegistries.inputValidation.nameSuffixMaxLength,
pattern: NineElevenRegistries.inputValidation.name
});

Answer 1

您需要对值使用数组，并将值存储在一个可观察对象中。

self.nameSuffixes = ko.observableArray([
{ options1: "Mr" },
{ options1: "Mrs" },
{ options1: "Miss" }
]);

self.nameSuffix = ko.observable();

在你看来-

<select id="d_name-suffix" style="width:auto; height:auto" data-bind="options: $root.nameSuffixes, value: nameSuffix, optionsText: 'options1'" />

Answer 2

所以实际上我找到了这个问题的解决方案。我没有将Mr、Mrs等作为对象，而是使用以下数组创建了字符串：

self.nameSuffixes = ko.observableArray([ "","Mr.","Mrs","Miss"]);
self.nameSuffix = ko.observable();