knockout.js - how to bind data individually in select using knockoutjs

Question

I have a list of select from observableArray, I when I choose a data in first select it will bind the data in next select. this is what it look like in my code.

html:

<tbody data-bind="foreach: Participants">
    <tr>
        <td data-bind="text: Name"></td>
        <td>
           <select data-bind=" 
                options: $parent.AttendanceCodes, 
                optionsText: 'Text', 
                optionsValue: 'Value', 
                value:$parent.AttendanceCode,
                optionsCaption: 'select',
                event:{change: $parent.onchange_attendancecodes}">
           </select>
        </td>
        <td>
            <select class="reason" data-bind="options: $parent.AbsenceReasons, 
            optionsText: 'Text', 
            optionsValue: 'Value', 
            value: $parent.AbsenceReason"></select>
        </td>
    </tr>
</tbody>

knockoutjs

    var viewModel = function(data){
    var self = this;

    self.AbsenceReasons = ko.observableArray([]);
    self.AttendanceCodes = ko.observableArray(attendanceCodeList);
    self.Participants = ko.observableArray(participantsData);

    //event
    self.onchange_attendancecodes = function(){
        self.AbsenceReasons.removeAll();
        self.AbsenceReasons(absenceReasonsList);
    };
};

http://jsfiddle.net/comfreakph/xH8FU/18/

Answer 1

您在代码中遇到的问题是所有第二列选择都绑定到相同的“$parent.AbsenceReasons”，因此在change事件处理程序中，一旦您更改 self.AbsenceReasons，所有第二列选择都会更改，因为这就是他们的必然。

解决方案非常简单：

1. 每个参与者都应该有自己的“缺席原因”，
2. 第二列选择应该绑定到每个参与者的缺席原因，
3. 并且change事件处理程序仅更改特定参与者的缺席原因。

jsFiddle