从 3 个重复的选择标签中优先选择一个唯一选项答案

【问题标题】：Select only one unique option in a precedence from 3 repeated select tags从 3 个重复的选择标签中优先选择一个唯一选项
【发布时间】：2021-03-27 04:52:03
【问题描述】：

我有三个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 标记中选择一个。但是，用户必须从每个部分中选择唯一值。

示例：-

如果用户在第 1 部分中选择了选项 2，他/她不能在第 1 部分中选择那个选项2 或 3。

基于此，我必须在脚本文件中写6种不同的情况吗？或者有什么更好的方法吗？

【问题讨论】：

查看我的答案here

标签： javascript jquery

【解决方案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>

【讨论】：