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>

正在进行示例 here

KnockOut通过下拉列表获取复选框的选定值

1 个答案: