JQuery 从先前 Select 的下拉列表中隐藏显示选项

我想从之前 Select 的下拉列表中隐藏选项，但我的解决方案只适用于两个下拉列表.

这意味着当我进入第三个下拉列表时，它不会显示第二个下拉列表中的选定选项，这是可以的，但它会显示第一个下拉列表中的选定选项.

所以，据我所知，我使用的方法覆盖了最后一个，这就是为什么它不起作用.

以下是我的 Select 列表:

<select id="select1" 
        onchange="getSelectValue(this.value)" 
        asp-for="AssignedGroups.GroupMemberId1" 
        asp-items="@(new SelectList(Model.Agents,"Agent_Id","Agent_Id"))" 
        class="form-control">
    <option hidden selected></option>
</select>

<select id="select2" 
        onchange="getSelectValue2(this.value)" asp-
        for="AssignedGroups.GroupMemberId2"  
        asp-items="@(new SelectList(Model.Agents,"Agent_Id","Agent_Id"))"  
        class="form-control" >
    <option hidden selected></option>
</select>

<select id="select3" 
        onchange="getSelectValue3(this.value)" asp-
        for="AssignedGroups.GroupMemberId3" 
        asp-items="@(new SelectList(Model.Agents, "Agent_Id", "Agent_Id"))" 
        class="form-control">
    <option hidden selected></option>
</select>

还有我的 playbook :

function getSelectValue(select1) {
            $("#select2 option[value='" + select1 + "']").hide();
            $("#select2 option[value!='" + select1 + "']").show();
            $("#select3 option[value='" + select1 + "']").hide();
            $("#select3 option[value!='" + select1 + "']").show();

    }

    function getSelectValue2(select2) {
        
            $("#select1 option[value='" + select2 + "']").hide();
            $("#select1 option[value!='" + select2 + "']").show();
            $("#select3 option[value='" + select2 + "']").hide();
            $("#select3 option[value!='" + select2 + "']").show();

    }

    function getSelectValue3(select3) {
        $("#select1 option[value='" + select3 + "']").hide();
        $("#select1 option[value!='" + select3 + "']").show();
        $("#select2 option[value='" + select3 + "']").hide();
        $("#select2 option[value!='" + select3 + "']").show();

        
    }