設置多個下拉菜單的默認項並在 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>