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

Question

I have the following Lines of Code:

                        <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>

and my javascript is as follows:

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

My JS Enum:

    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'
};

What I am trying to do is set the default value of all my select tags to ignore which is ID 3 but if I use the data-bind option of value: $root.DefaultItem they all do get set to ignore but if I want to change one drop down to another item like Target data then every drop-down gets changed as well and I don't want that to happen. I also tried using selectedOptions: $root.DefaultItem but that didn't work, it didn't set all my items to Ignore as the docs say. I also want to console.log all my selections which is why I Have a selectedOptions array and if I bind that to value and try to console log my items only one ID shows. So, in a nutshell, I want to set all my dropdowns to Ignore (ID 3) and when I click my button I want to console Log all my selections. Here is a screenshot of my table

Answer 1

In my opinion the easiest way to achieve what you want while using knockout features is to extend the menuItems, so that they each have a property/value for each selection (which is initialized with the default-value).

This way you can just console.log them and they always have the correct value set, also you are able to identify which selection is for which menu item.

I made you a minimal example, whenever you click "log entries" it will show you the current selection for each entry, hope this helps to understand that you will need "a value for each item and select", and not "one value for all selects"

 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>