2리스트를 채우고 녹아웃에서 1리스트 데이터를 선택하는 방법은 무엇입니까?

Question

self.Subject = ko.observableArray([ 
        {"Math", "M01" }, 
        { "Chemistry","M02" }, 
        { "Physics", "M03" } 
       ]); 
self.Teacher = ko.observableArray([ 
        {"M01","Jack"}, 
        {"M01","Mike"}, 
        {"M02","Albert"}, 
        {"M02","Ching"}, 
        {"M03","Rick"} 
       ]); 

첫 번째 목록 (선택하지 않음)에서 수학 화학 및 물리를 사용하고 있으며 목록의 수학을 클릭하면 다른 목록이 잭과 마이크로 채워집니다.

Answer 1

이렇게하려면보기 모델에서 선택한 주제를 추적해야합니다. 그런 다음 계산 된 관찰 가능 (사용 가능한 교사)을 만들어 표시 할 교사를 추적 할 수 있습니다. 아래를 참조

https://jsfiddle.net/dw1284/9n36qcdu/

HTML :

<div> 
    <select multiple data-bind="options: Subjects, 
           optionsText: 'Name', 
           value: SelectedSubject, 
           optionsCaption: 'Choose Subject:'"> 
    </select> 
</div> 
<div data-bind="visible: SelectedSubject"> 
    Available Teachers: 
    <ul data-bind="foreach: AvailableTeachers"> 
    <li data-bind="text: Name" /> 
    </ul> 
</div> 

자바 스크립트 :

// Subject model 
function Subject(id, name) { 
    var self = this; 
    self.Id = ko.observable(id); 
    self.Name = ko.observable(name); 
} 

// Teacher model 
function Teacher(name, subjectId) { 
    var self = this; 
    self.Name = ko.observable(name); 
    self.SubjectId = ko.observable(subjectId); 
} 

// Main viewmodel 
function ViewModel() { 
    var self = this; 

    self.Subjects = ko.observableArray([ 
    new Subject('M01', 'Math'), 
    new Subject('M02', 'Chemistry'), 
    new Subject('M03', 'Physics') 
    ]); 

    self.Teachers = ko.observableArray([ 
    new Teacher('Jack', 'M01'), 
    new Teacher('Mike', 'M01'), 
    new Teacher('Albert', 'M02'), 
    new Teacher('Ching', 'M02'), 
    new Teacher('Rick', 'M03') 
    ]); 

    self.SelectedSubject = ko.observable(); 

    self.AvailableTeachers = ko.computed(function() { 
    var array = []; 
    if (self.SelectedSubject()) { 
     ko.utils.arrayForEach(self.Teachers(), function(teacher) { 
     if (teacher.SubjectId() === self.SelectedSubject().Id()) { 
      array.push(teacher); 
     } 
     }); 
    } 
    return array; 
    }); 
} 

ko.applyBindings(new ViewModel());