设置多个下拉菜单的默认项并在 Knockout JS 中记录其选择

Question

我有以下几行代码：

                        <tbody data-bind="foreach: { data: MenuItems, as: 'tableitem' }"> 
                    <tr>
                        <td data-bind="html: tableitem"></td>
                        <td>
                            <select class="form-control" data-bind="options: $root.GroupedScorecardTypes, optionsText: 'Name', optionsValue: 'Id', selectedOptions: $root.DefaultItem"></select>
                        </td>
                        <td>
                            <select class="form-control" data-bind="options: $root.GroupedScorecardTypes, optionsText: 'Name', optionsValue: 'Id', selectedOptions: $root.DefaultItem"></select>
                        </td>
                    </tr>
                </tbody>

我的javascript如下：

self.GroupedScorecardTypes = ko.observable(BEE123.Utils.CreateLookupArrayFromEnumType(BEE123.GroupedScorecardTypes));
        self.DefaultItem = ko.observable(3);
        self.SelectedOptions = ko.observableArray([]);

我的 JS 枚举：

    BEE123.GroupedScorecardTypes = {
  AllData : function () { var fn = function () { return 1; }; fn.Text = 'All Data'; fn.Value = 1; fn.SortOrder = 1; fn.Key = 'AllData'; return fn; }(),
  1 : 'All Data',
  TargetData : function () { var fn = function () { return 2; }; fn.Text = 'Target Data'; fn.Value = 2; fn.SortOrder = 2; fn.Key = 'TargetData'; return fn; }(),
  2 : 'Target Data',
  Ignore : function () { var fn = function () { return 3; }; fn.Text = 'Ignore'; fn.Value = 3; fn.SortOrder = 3; fn.Key = 'Ignore'; return fn; }(),
  3 : 'Ignore'
};

我想要做的是将所有选择标签的默认值设置为忽略 ID 3 但如果我使用value: $root.DefaultItem的数据绑定选项value: $root.DefaultItem他们都设置为忽略但如果我想将一个下拉列表更改为另一个项目，例如目标数据，然后每个下拉列表也会更改，我不希望这种情况发生。 我也尝试使用selectedOptions: $root.DefaultItem但这不起作用，它没有像文档所说的那样将我的所有项目设置为忽略。 我也想console.log我所有的选择，这就是为什么我有一个selectedOptions数组，如果我将它绑定到 value 并尝试控制台记录我的项目只显示一个 ID。 因此，简而言之，我想将所有下拉列表设置为忽略（ID 3），当我单击按钮时，我想控制台记录我的所有选择。 这是我的表的屏幕截图

Answer 1

在我看来，在使用淘汰赛功能时实现您想要的最简单的方法是扩展菜单项，以便它们每个选项都有一个属性/值（使用默认值初始化）。

通过这种方式，您可以只对它们进行 console.log，并且它们始终具有正确的值集，您还可以确定哪个选项适用于哪个菜单项。

我给你做了一个最小的例子，每当你点击“日志条目”时，它都会向你显示每个条目的当前选择，希望这有助于理解你将需要“每个项目的一个值并选择”，而不是“一个值所有选择”

 var options = [ {opt_text:'All Data',opt_val:1}, {opt_text:'Target Data',opt_val:2}, {opt_text:'Ignore',opt_val:3}, ]; var defaultItem = 3; var menuItems = [ { label: 'test 123', cleanTarget: defaultItem, populateTarget: defaultItem, }, { label: 'test 223', cleanTarget: defaultItem, populateTarget: defaultItem, }, { label: 'test 333', cleanTarget: defaultItem, populateTarget: defaultItem, }, ]; var model = function () { var self = this; self.MenuItems = ko.observableArray(menuItems); self.GroupedScorecardTypes = ko.observableArray(options); } var vm = new model(); ko.applyBindings(vm); $(document).on('click','#log_entries',function(){ console.log(vm.MenuItems()) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <table> <tbody data-bind="foreach: { data: vm.MenuItems, as: 'tableitem' }"> <tr> <td data-bind="html: tableitem.label"></td> <td> <select class="form-control" data-bind="options: $root.GroupedScorecardTypes, optionsText: 'opt_text', optionsValue:'opt_val', value: tableitem.cleanTarget"></select> </td> <td> <select class="form-control" data-bind="options: $root.GroupedScorecardTypes, optionsText: 'opt_text', optionsValue:'opt_val', value: tableitem.populateTarget"></select> </td> </tr> </tbody> </table> <button id="log_entries"> Log entries </button>