Javascript 强制对选定图元进行唯一选择

我试图创建一个站点，在一个表中有任意数量的行，最多包含2个输入。我希望输入的组合是唯一的。也就是说，如果我们有以下元素

   <select><option value='0'>None</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>
   <select><option value='0'>None</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option></select>

没有一个
1.
2.
3.
没有一个
4.
5.
6.


实现这一点的一种方法是构建一个由连接在一起的选定值对组成的数组。然后，当选择一对新值时，可以将其与现有数组进行比较，以查看它是否已经存在，并对其进行适当的处理

注意，我还对构建HTML的逻辑进行了一些修改，使其更加一致和简洁

我还删除了默认“请选择”选项中的
0
值，因为这在与其他值进行比较时会导致不必要的复杂性


jQuery（$=>{
$（'button.add'）。在（'click'，（）=>{
$（'.entryTable tfoot tr'）.clone（）.insertBefore（'.entryTable tbody tr:last'）；
});
$（“.entryTable”）。在（“单击”、“删除”按钮）上，e=>{
$（e.target）.tr.remove（）；
});
让getSelections=（）=>{
return$（'tbody.dataRow'）.map（（i，row）=>{
设$row=$（row）；
返回`${$row.find（'.projectsMaster'）.val（）}${$row.find（'.activitiesMaster'）.val（）}`；
}).get（）；
}
$（“.entryTable”）.on（'change'，'select'，e=>{
设$row=$（e.target）.closest（'tr'）；
让item=`${$row.find（'.projectsMaster'）.val（）}${$row.find（'.activitiesMaster'）.val（）}`；
if（item.length==2&&getSelections（）.filter（i=>i==item.length>1）{
e、 预防默认值（）；
console.log（'已选择！'）；
}
});
});
table>tfoot{
显示：无；
}
.入口台{
保证金：自动；
宽度：95%；
边框：1px纯黑；
边界塌陷：塌陷；
}
.entryTable输入，
挑选{
宽度：100%；
字号：18px；
}
.entryTable tr{
边框底部：1px纯黑；
边框颜色：黑色
}
.入口表td{
文本对齐：居中；
填充：10px；
右边框：1px纯黑；
}
艾德罗先生{
背景色：暗灰色
}
.马斯特斯{
显示：无；
}

项目
活动
添加
挑选
1.
2.
3.
挑选
4.
5.
6.
删除
实现这一点的一种方法是构建一个连接在一起的选定值对数组。然后，当选择一对新值时，可以将其与现有数组进行比较，以查看它是否已经存在，并对其进行适当的处理

注意，我还对构建HTML的逻辑进行了一些修改，使其更加一致和简洁

我还删除了默认“请选择”选项中的
0
值，因为这在与其他值进行比较时会导致不必要的复杂性


jQuery（$=>{
$（'button.add'）。在（'click'，（）=>{
$（'.entryTable tfoot tr'）.clone（）.insertBefore（'.entryTable tbody tr:last'）；
});
$（“.entryTable”）。在（“单击”、“删除”按钮）上，e=>{
$（e.target）.tr.remove（）；
});
让getSelections=（）=>{
return$（'tbody.dataRow'）.map（（i，row）=>{
设$row=$（row）；
返回`${$row.find（'.projectsMaster'）.val（）}${$row.find（'.activitiesMaster'）.val（）}`；
}).get（）；
}
$（“.entryTable”）.on（'change'，'select'，e=>{
设$row=$（e.target）.closest（'tr'）；
让item=`${$row.find（'.projectsMaster'）.val（）}${$row.find（'.activitiesMaster'）.val（）}`；
if（item.length==2&&getSelections（）.filter（i=>i==item.length>1）{
e、 预防默认值（）；
console.log（'已选择！'）；
}
});
});
table>tfoot{
显示：无；
}
.入口台{
保证金：自动；
宽度：95%；
边框：1px纯黑；
边界塌陷：塌陷；
}
.entryTable输入，
挑选{
宽度：100%；
字号：18px；
}
.entryTable tr{
边框底部：1px纯黑；
边框颜色：黑色
}
.入口表td{
文本对齐：居中；
填充：10px；
右边框：1px纯黑；
}
艾德罗先生{
背景色：暗灰色
}
.马斯特斯{
显示：无；
}

项目
活动
添加
挑选
1.
2.
3.
挑选
4.
5.
6.
删除
找到了你想要的东西。。。在用户看到选项之前，我们的函数检查其他值和具有相同值的其他行，然后禁用不再可用的选项。
我更改了重复检查函数和“change”侦听器（我将其更改为“focusin”侦听器）


jQuery.fn.outerHTML=function（）{
返回jQuery（“”）.append（this.eq（0.clone（））.html（）；
};
var projects=$（“#projectsMaster”）；
var活动=$（“#活动主控”）；
var numRows=0；
$（文档）.ready（函数（）{
$（“.entryTable”）。在（“单击”，“删除按钮”，函数（）上）{
如果（numRows>0）{
var行=$（此）.tr；
row.remove（）；
numRows--；
}
});
//在用户看到选项之前运行检查
$（“.entryTable”）.on（'focusin'，'select'，function（）{
//我们必须运行这个函数，给它另一个select，因为我是向后写的；）对不起
变量$this=$（this），
$other=$this.closest（'tr'）。find（'select'）。not（$（this））；
执行唯一性项目活动（其他）；
});
});
函数强制UniqueProjectsActivities（select、isSecondRun）{
变量$this=$（选择），
thisVal=$this.val（），
thisCol=$this.closest（'td'）。是（'.activity'）？'activity'：'project'，
pairCol=（thisCol='project'）？'activity'：'project'，
$table=$this.closest（'.entryTable'），
$thisRow=$this.closest（'tr'），
$pair=$thi