Select 只有一个唯一选项，优先于 3 个重复的 select 标签

Question

我有三个Select标签如下

<select id='select1'>
<option value='1'> Option 1</option>
<option value='2'> Option 2</option>
<option value='3'> Option 3</option>
<option value='4'> Option 4</option>
</select>
----------------------------------------------
<select id='select2'>
<option value='1'> Option 1</option>
<option value='2'> Option 2</option>
<option value='3'> Option 3</option>
<option value='4'> Option 4</option>
</select>
-----------------------------------------------
<select id='select3'>
<option value='1'> Option 1</option>
<option value='2'> Option 2</option>
<option value='3'> Option 3</option>
<option value='4'> Option 4</option>
</select>

所有Select标签都是相同的，除了它们有不同的id 。 现在，用户需要从每个Select标签中获取一个 select。 但是，用户必须 select 每个部分的唯一值。

例子：-

如果用户在第 1 节中选择选项 2 ，他/她不能在第 2 节或第 3 节中选择该选项。

基于此，我必须在 Script 文件中编写6 个不同的案例吗？ 或者有没有更好的方法来做到这一点？

Answer 1

<select id='select1' onchange='checkUnique(this.value, this.id)'>
<option value=''> -Select One- </option>
<option value='1'> Option 1</option>
<option value='2'> Option 2</option>
<option value='3'> Option 3</option>
<option value='4'> Option 4</option>
</select>
----------------------------------------------
<select id='select2' onchange='checkUnique(this.value, this.id)'>
<option value=''> -Select One- </option>
<option value='1'> Option 1</option>
<option value='2'> Option 2</option>
<option value='3'> Option 3</option>
<option value='4'> Option 4</option>
</select>
-----------------------------------------------
<select id='select3' onchange='checkUnique(this.value, this.id)'>
<option value=''> -Select One- </option>
<option value='1'> Option 1</option>
<option value='2'> Option 2</option>
<option value='3'> Option 3</option>
<option value='4'> Option 4</option>
</select>

<script>
    function checkUnique(value, id) {
        let select1 = document.getElementById("select1").value
        let select2 = document.getElementById("select2").value
        let select3 = document.getElementById("select3").value
       
        if(id == "select1" && (value == select2 || value == select3) ){
             alert("already selected in other option");
             document.getElementById("select1").selectedIndex = 0;
             return false;
        }
        else if(id == "select2" && (value == select1 || value == select3) ){
             alert("already selected in other option");
             document.getElementById("select2").selectedIndex = 0;
             return false;
        }
        else if(id == "select3" && (value == select2 || value == select1) ){
             alert("already selected in other option");
             document.getElementById("select3").selectedIndex = 0;
             return false;
        }

    }
</script>