设置多个下拉菜单的默认项并在 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'
};

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

Answer 1

在我看来，在使用挖空功能时实现你想要的效果的最简单方法是扩展 menuItems，这样它们每个都有一个 property/value 用于每个 selection（初始化为default-value).

这样你就可以 console.log 它们并且它们总是设置正确的值，你也可以识别哪个 selection 是哪个菜单项。

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

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>

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

Set Default Item of multiple drop downs and log its selections in Knockout JS

javascript

html

jquery

knockout.js