Question

我在knockout js中有一个下拉列表，它与对象列表绑定。我想在下拉列表中进行默认选择。谁能告诉我如何在淘汰赛下拉列表中进行默认选择？

我的HTML代码

<select data-bind="options: availableCountries,
               optionsText: 'itemcapacity',
               value: selectedCountry"></select>
<pre data-bind="text:ko.toJSON(selectedCountry,null,2)"></pre>

以下是小提琴

http://jsfiddle.net/2BnQk/2/

我想将itemcapacity：'High Cap'作为下拉列表中的初始选择。我怎样才能做到这一点？

Answer 1

您必须将optionsValue设置为选择哪个值。

<select data-bind="options: availablItems,
                   optionsText: 'itemcapacity',
                  optionsValue: 'id',
                   value: selectedItem"></select>
 <pre data-bind="text:ko.toJSON(selectedItem,null,2)"></pre>

您可以像这样设置项目：

var AppViewModel = function() {
    this.availablItems = ko.observableArray(choices);
        this.selectedItem = ko.observable(8); //Make the selected default id as 8
};

示例项目：

http://jsfiddle.net/Ysusx/

Answer 2

在你的jsFiddle中，

只需更改

this.selectedItem = ko.observable();

到

this.selectedItem = ko.observable(choices[1]);

Answer 3

您需要在定义可观察量时自己做一些逻辑。这是一个示例，它只会选择列表中itemcapacity为高限额的第一项：

var highCapItem = null;
for ( var i = 0; i < choices.length; ++i ) {
    if ( choices[i].itemcapacity === 'High Cap' ) {
        highCapItem = choices[i];
        break;
    }
}
this.selectedItem = ko.observable( highCapItem );

如果它没有找到任何匹配的项目，Knockout将恢复到列表中的第一项。

更新了小提琴：http://jsfiddle.net/2BnQk/3/

淘汰js下拉与初步选择

3 个答案: