用下拉菜单获取复选框的选定值

Question

在这个代码片段中，我为每个复选框项创建了一个复选框列表和下拉列表。当任何复选框被选中时，它将显示在选定区域，反之亦然。不是，我只是想得到下面的条件值:

我想获得下拉框沿着复选框被选中的值。当单个下拉值发生变化时，也更新该值。下面是我的工作示例

function Builder(item) {
    this.id = ko.observable(item.id),
    this.title = ko.observable(item.title)
    this.occurence = ko.observable(item.occurence)
    this.selectedOne = ko.observable();
}
function Generator(choices) {
    return ko.utils.arrayMap(choices, function (item) {
        return new Builder(item);
    })
}
var viewModel = {};
viewModel.choices = {
    "results": [{
        "id": 1,
            "title": "Category 1",
            "occurence": [{
            "Selected": false,
                "Text": "Every Week",
                "Value": "1"
        }, {
            "Selected": false,
                "Text": "Every Month",
                "Value": "2"
        }]
    }, {
        "id": 2,
            "title": "Category 2",
            "occurence": [{
            "Selected": false,
                "Text": "Every Week",
                "Value": "1"
        }, {
            "Selected": false,
                "Text": "Every Month",
                "Value": "2"
        }]
    }]
};
viewModel.Looper = ko.observableArray(
Generator(viewModel.choices.results));
viewModel.testing = ko.observableArray();
viewModel.selectedChoices = ko.observableArray();
viewModel.selectedChoicesDelimited = ko.computed(function () {
    if (viewModel.selectedChoices()) {
        viewModel.testing([]);
        ko.utils.arrayForEach(viewModel.selectedChoices(), function (item1) {
            ko.utils.arrayFilter(viewModel.Looper(), function (item2) {                
                if (item1 == item2.id()) {
                viewModel.testing.push(item2);
                    return true;
                 }
            });
        });
    }
    //return viewModel.selectedChoices().join(",");
});
ko.applyBindings(viewModel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h1>Select Items</h1>
<ul class="options" data-bind="template: { foreach: Looper }">
    <li>
        <label>
            <input type="checkbox" name="NotifyMembers" data-bind="attr: { value: $data.id }, checked: $parent.selectedChoices" /><span data-bind="text: $data.title"></span>
        </label>
        <select data-bind="options:$data.occurence,optionsText:'Text',optionsValue:'Value',value:selectedOne"></select>
    </li>
</ul>
<hr />
<h1>Your Selected Items</h1>
<ul class="options" data-bind="foreach: testing">
    <li>
        <label>
            <input type="checkbox" name="NotifyMembers" data-bind="attr: { value: $data.id }, checked: $parent.selectedChoices" /><span data-bind="text: $data.title"></span>
        </label>
       <select data-bind="options:$data.occurence,optionsText:'Text',optionsValue:'Value',value:selectedOne"></select>
    </li>
</ul>
<div data-bind="text: selectedChoices"></div>

Answer 1

您可以简单地使用现有的代码并实现您所寻找的

视图:

<div data-bind="foreach:testing">
    <span data-bind="text:$data.name"></span>
    <span data-bind="text:$data.selectedOne"></span>
</div>

Working sample up here