JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<table>
<tbody data-bind="foreach: listA">
<tr>
<td data-bind="text: toMatch"></td>
<td data-bind="text: name"></td>
</tr>
</tbody>
</table>
<table>
<tbody data-bind="foreach: listB">
<tr>
<td>
<select data-bind="options: optionList, value: match, optionsCaption: 'Match...'"></select>
</td>
<td data-bind="text: surname"></td>
</tr>
</tbody>
</table>
JavaScript
var vm = function () {
var top_self = this;
top_self.listA = ko.observableArray([{
toMatch: "abc123",
name: "Andrew"
}, {
toMatch: "abc456",
name: "Andrew"
}, {
toMatch: "abc789",
name: "Andrew"
}]);
top_self.listB = ko.observableArray([]);
function listB_temp(setMatch, setSurname) {
var self = this;
self.match = ko.observable(setMatch);
self.surname = setSurname;
self.optionList = ko.computed(function () {
var tempArr = [];
var tempArr_2 = [];
console.log(top_self)
_.each(top_self.listA(), function (item, key, list) {
var matched = false;
tempArr.push(item.toMatch);
_.each(top_self.listB(), function (item_1, key_1, list_1) {
console.log(top_self.listB())
if (matched == false && item.toMatch == item_1.match()) {
matched = true;
tempArr_2.push(item.toMatch);
}
})
});
return _.compact(_.difference(tempArr, tempArr_2).concat(self.match()));
});
return {
match: self.match,
surname: self.surname,
optionList: self.optionList
}
}
top_self.listB.push(
new listB_temp("", "Stew"),
new listB_temp("", "Btew"),
new listB_temp("", "Ctew"))
return {
listA: top_self.listA,
listB: top_self.listB
}
}
ko.applyBindings(new vm());