Javascript 从3个重复的选择标记中,在优先级中仅选择一个唯一选项

Javascript 从3个重复的选择标记中,在优先级中仅选择一个唯一选项,javascript,jquery,Javascript,Jquery,我有三个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> </sel

我有三个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>

所有选择标记都是相同的,只是它们具有不同的id。现在,用户需要从每个选择标记中选择一个。但是,用户必须从每个部分中选择唯一的值

例如:-

如果用户在第1节中选择了选项2,则无法在第2节或第3节中选择该选项

基于此,我必须在脚本文件中编写6个不同的案例吗?或者有更好的方法吗?

检查我的答案
<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>