Question

这实际上与我问here的问题有关。但是，由于这种情况略有不同，我认为如果我完全提出一个新问题是最好的。

我知道当我使用简单的字符串数组时，如何在下拉列表中预选一个选项。

字符串数组

视图的

<select id="first" data-bind="options: firstDropdownOptions, value: selectedFirstOptionValue"></select>

查看模型

firstDropdownOptions: ko.observableArray(['USA','UK','Other']);
selectedFirstOptionValue: ko.observable('UK');

..但如果它是一个对象数组，我如何预先选择一个选项？

对象数组

视图的

<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: selectedSecondOptionValue"></select>

查看模型

secondDropdownOptions: ko.observableArray([
    { value: -1, title: 'Select Type' },
    { value: 1, title: 'Option New 1' },
    { value: 2, title: 'Option New 2' }, // I want this option selected initially
    { value: 3, title: 'Option New 3' }
]);
// similarly, how to pre-select the 3rd option in this case?
selectedSecondOptionValue: ko.observable('')

这是fiddle。

我已尝试在此处传递整个对象，该值仅作为整数。我甚至认为如果我尝试以可以明确设置属性的方式呈现<select>下拉列表，那么也许我可以尝试为它操纵selected属性。但我没有得到预期的结果。这是fiddle for this。

<select data-bind="foreach: secondDropdownOptions">
    <option data-bind="attr: { text: title, value: value}"></option>
</select>

在这种情况下，虽然value属性绑定到下拉列表中的每个<option>，但文本不会绑定。

Answer 1

使选项列表成为可由两个可观察对象使用的单独变量。

var options = [
    { value: -1, title: 'Select Type' },
    { value: 1, title: 'Option New 1' },
    { value: 2, title: 'Option New 2' }, // I want this option selected initially
    { value: 3, title: 'Option New 3' }
];

var vm = {
  secondDropdownOptions: ko.observableArray(options),
  selectedSecondOptionValue: ko.observable(options[2])
};

Probaby你真正想做的是使用optionsValue绑定，正如Bogdan Goie建议的那样，在这种情况下你的初始化只是

  selectedSecondOptionValue: ko.observable(2)

顺便说一句，您可能还希望将optionsCaption parameter视为-1选项的替代方案。

Answer 2

您未指定optionsValue参数。根据{{3}}：

...但是，如果你想让用户从一个数组中选择任意JavaScript对象（不仅仅是字符串），然后看到 optionsText和optionsValue参数。

选择对象数组：

<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', optionsValue: 'value', value: selectedSecondOptionValue"></select>

工作docs。

在KnockoutJS中处理对象数组时，如何在选择下拉列表中预先选择选项？

2 个答案: