Javascript 从3个重复的选择标记中,在优先级中仅选择一个唯一选项
我有三个Select标签,如下所示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 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>