根据先前的选择</select>敲除动态<select>选项

Question

我想创建<select>下拉列表，其中选项根据两个表之间的匹配方式而变化，基本上所有不匹配的<select>元素都具有剩余值。我有问题，我不知道从哪里开始。

这是我到达jsFiddle

的距离

var vm = function () {

var listA = ko.observableArray([
    { toMatch: "abc123", name: "Andrew" }, 
    { toMatch: "abc456", name: "Andrew" }, 
    { toMatch: "abc789", name: "Andrew" }]);

var listB = ko.observableArray([
    { match: ko.observable("abc123"), surname: "Smith" }, 
    { match: ko.observable(""), surname: "Cruse" }, 
    { match: ko.observable(""), surname: "Domnic" }]);

var optionsList = ko.computed(function () {
    var tempArr = [];
    var tempArr_2 = [];
    _.each(listA(), function (item, key, list) {
        var matched = false;
        tempArr.push(item.toMatch);
        _.each(listB(), function (item_1, key_1, list_1) {
            if (matched == false && item.toMatch == item_1.match()) {
                matched = true;
                tempArr_2.push(item.toMatch);
            }
        })
    })
    console.log(_.difference(tempArr,tempArr_2))
    return _.difference(tempArr,tempArr_2);
});

return {
    listA: listA,
    listB: listB,
    optionsList: optionsList
}

}

结果是所有框都具有相同的值。

我想出了a solution。