10

我正在使用KnockoutJS和durandalJS 2.0。我正在根据数据库表条目动态添加两个下拉列表，并用另一个表中的数据填充它们。每个下拉菜单也有一个复选框。如何获取选定的下拉值？

在此处输入图像描述

楷模

var dataToAdd = {
    mydata_Id: ko.observable(),
    mydata_Name: ko.observable(),
    mydata_data: ko.observableArray([dataTask])
};

var dataTask = {
    taskId: ko.observable(),
    dropdownId: ko.observable()
};

var taskList=ko.observableArray([]);//get data from database table. Consider there are two entries.
var dropdownData=ko.observableArray([]); //get the dropdown data

看法

//Since *taskList* has two entries, two dropdowns with their respective checkbox will get generated.
<div data-bind="foreach:taskList">
    <label><input type="checkbox" data-bind="checked: true" />
    <span data-bind="text:Name"></span></label>    

    <select data-bind="options: $root.DropdownData, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select...', value: $root.dataTask.dropdownId</select>
</div>

第一：当我点击按钮时，如何获得每个下拉菜单的选定值ADD？当我使用 value:$root.dataTask.dropdownId时，两个下拉菜单都会更改为相同的选定值。当我选中复选框时，应该启用下拉菜单，选择后，我应该能够更新observable如下所示的数组：

{taskId:44,dropdownId:10},{taskId:55,dropdownId:11}

第二：此外，当我取消选中该复选框时，相应的下拉菜单应该被禁用，并且该条目应该从observable数组中删除。

4

1 回答 1

4

你的问题有很多不确定性，但我已经包含了一个工作小提琴来展示你正在寻找什么 -

http://jsfiddle.net/Lxt7E/1/

<div data-bind="foreach: Dropdowns">
    <label><input type="checkbox" data-bind="checked: checkedObs" />
    <span data-bind="text: label"></span></label>    

    <select data-bind="disable: checkedObs, options: theseOptions, optionsText: 'Name', optionsCaption: 'Select...', value: selectedOption"></select>
</div>

<button data-bind="click: addButton">Add</button>

简而言之，您可以做的是创建模型的实例，例如在这种情况下的“下拉”，并使用 Knockout 的 foreach 绑定来呈现n它们的数量。下拉列表的实例包含执行您正在查找的操作的可观察对象，并且可以在add函数中使用来决定是写入值还是 w/e

于 2013-12-27T15:47:55.320 回答