带有初始选择的淘汰赛 js 下拉菜单答案

【问题标题】：knockout js dropdown with intital selection带有初始选择的淘汰赛 js 下拉菜单
【发布时间】：2014-05-20 16:13:03
【问题描述】：

我在淘汰赛 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' 作为下拉列表中的初始选择。我怎样才能做到这一点？

【问题讨论】：

标签： knockout.js

【解决方案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/

【讨论】：

【解决方案2】：

在定义 observable 时，您需要自己做一些逻辑。这是一个示例，它将仅选择列表中itemcapacity 为 High Cap 的第一项：

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/

【讨论】：

【解决方案3】：

在你的 jsFiddle 中，

只是改变

this.selectedItem = ko.observable();

到

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

【讨论】：

我不能只使用choices[1] 选项进行硬编码，因为有时我可能会获得超过2 个选择，并且itemcapacity='High Cap' 的对象可能不是列表中的第二项。还有一种情况，在这种情况下，我根本不会得到“High Cap”项目，在这种情况下，第一个元素将在下拉列表中显示为默认选择。