Javascript 敲除Js多选绑定

我在KnockoutJs下拉列表中绑定了一组国家列表，如下所示

---

在knockoutJS中，如何在一个国家/地区列表中选择该国家/地区后立即删除所有其他国家/地区列表中的国家/地区？

如果您拥有所有地区，您可以动态确定还有哪些国家/地区可供选择。逻辑是：

• 收集所有区域及其选择
• 从该列表中删除当前正在查看的区域
• 以所有可用的国家/地区为例
• 从该列表中删除其他区域选择的任何国家/地区

代码：

const getAvailableCountries=（所有区域，此区域）=>{
const otherRegions=allRegions.filter（r=>r！==thisRegion）；
const inUseByOtherRegions=新集合(
otherRegions.flatMap（r=>r.selectedCountries（））
);
返回国家/地区.filter（c=>！inUseByOtherRegions.has（c））；
}

困难的部分是获取对“兄弟区域”的引用。我的建议是使用knockout的绑定上下文：

data-bind="options: getAvailableCountries($parent.regions, $data)"

在可运行的示例中：

const countries=[“C1”、“C2”、“C3”、“C4”、“C5”]；
常量区域=[“R1”、“R2”、“R3”]；
const getAvailableCountries=（所有区域，此区域）=>{
const inUseByOtherRegions=新集合(
allRegions.flatMap（r=>r==thisRegion
? []
：r.选定的国家（）
)
);
返回国家/地区.filter（c=>！inUseByOtherRegions.has（c））；
}
常数vm={
区域：regions.map(
regionId=>({
regionId，
getAvailableCountries，
选定国家/地区：ko.observableArray（[]）
})
)
}
ko.应用绑定（vm）