2014-06-25 41 views
3

我有使用Knockout动态创建的X个下拉列表,现在我想为每个下拉列表预先选择一个选项。巧合的是,我有一个可观察的数组,其X条目对应于我想要选择的选项。我如何使用这个数组来选择我的选项?在knockout.js中添加可观察数组的下拉列表

实施例视图模型:

function AppViewModel() { 
    var self = this; 
    self.array = ko.observable(["Dog","Cat"]); 
} 

在本例中,我有两个下拉列表,两者都具有“狗”和“猫”选项。我想为第一个下拉选择“狗”,第二个选择“猫”。

这里是我的HTML:

<div data-bind="foreach: array"> 
     <label> 
     <select data-bind="options: array"></select> 
     </label> 
</div> 
+0

如果您的要求真的很简单,您可以使用foreach中的$ index()来访问选定的值:http://jsfiddle.net/pvF43/ – nemesv

+1

@nemesv这正是我所需要的。当需要基于数组的索引进行填充时,需要使用$ index()。谢谢! – user3757174

回答

2

由于每docs你需要一个value为您选择的有约束力。

function AppViewModel() { 
    var self = this; 
    self.array = ko.observable(["Dog","Cat"]); 
    self.selected = ko.observable(self.array()[0]); 
} 

然后:

<select data-bind="options: array, value: selected "></select> 

例子:http://jsfiddle.net/H6DL5/

如果你有许多的下拉列表中,那么你可以使用subVMs的数组,你的结果。事情是这样的:

function AppViewModel() { 
    var self = this; 
    self.array = ko.observable(["Dog", "Cat", "Weasel"]); 
    self.dropDowns = ko.observableArray([ 
    new SubVM("Dog"), 
    new SubVM("Cat")]); 
} 

function SubVM(selected) { 
    var self = this; 
    self.selected = ko.observable(selected); 
} 

可以绑定像这样:

<div data-bind="foreach:dropDowns"> 
    <select data-bind="options: $parent.array, value: selected "></select> 
</div> 

现在,你需要将它们添加到您的母VM的dropDowns阵列,您可以添加尽可能多的下拉列表。

例子:http://jsfiddle.net/H6DL5/1/

如果您需要在每个下拉不同的选择,只需添加一个阵列的可用选项,您SubVM和绑定为options,与其母公司名单。

+0

我有和数组中的元素相同数量的下拉列表,所以我不想只硬编码一个选定的值。 – user3757174

+0

@ user3757174:您将需要将实际选定的值放在某个地方不是您?你可以创建一个值的数组,但更好的可能是创建一个具有选定值的子虚拟机。 –

+0

当然,但我不会总是有2个下拉列表 - 可能还有更多,取决于传入的数据。也许我应该动态创建observables? – user3757174

相关问题