JavaScript - 检查多个 SELECT 是否有重复选项答案

【问题标题】：JavaScript - Check multiple SELECT for duplicate optionsJavaScript - 检查多个 SELECT 是否有重复选项
【发布时间】：2013-10-03 16:06:32
【问题描述】：

本题基于THIS QUESTION

When an option from one of the SELECT boxes were selected, I wanted the rest to be repopulated, without said option, but instead, is there an easy way to loop through all these select items, to ensure the same option hasn'没有被选中两次？

谢谢。

Person Number 1
<select name="person1">
<option value="null">Please Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Person Number 2
<select name="person2">
<option value="null">Please Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Person Number 3
<select name="person3">
<option value="null">Please Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

基本概述： JavaScript 循环以确保没有一个选项被选择了两次？

【问题讨论】：

jQuery 是你的选择还是你需要纯 JS？
@j08691 不幸的是纯 JS

标签： javascript arrays loops element document

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script>
function doAction(el) {

    for (var i = 0; i < document.getElementById('person2').length; i++) {
        var v = (i != el.selectedIndex ? '' : 'disabled');

        document.getElementById('person2')[i].disabled = v;
        if (document.getElementById('person2').selectedIndex == el.selectedIndex)
            document.getElementById('person2').selectedIndex = 0;

        document.getElementById('person3')[i].disabled = v;
        if (document.getElementById('person3').selectedIndex == el.selectedIndex)
            document.getElementById('person3').selectedIndex = 0;
    }
}
</script>
</head>
<body>

Person Number 1
<select id="person1" onchange="doAction(this)" >
<option value="null">Please Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>
Person Number 2
<select id="person2">
<option value="null">Please Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>
Person Number 3
<select id="person3">
<option value="null">Please Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

</body>
</html>

【讨论】：

如果我为第 1 个人创建一个部分，然后改变主意，会发生什么？
在其他选择中，您无法选择第 1 个人，请在此处复制并粘贴 HTML：w3schools.com/js/tryit.asp?filename=tryjs_events 并自行尝试
我换一种说法。如果我从第一个选择中选择＃2，我可以看到它被其他选择禁用。美好的。但是，如果我改变主意并从第一个选择中选择 #3，现在 #3 和 #2 将被禁用。
@Haroldis，谢谢，这似乎是一个很好的解决方案，但是人数是动态创建的，所以并不总是三个。另外，Person# 选择器似乎忽略了格式？
如何生成 id 或 name？

【解决方案2】：

如果你使用

var x = document.getElementByName('person1').value;
var y = document.getElementByName('person2').value;
var z = document.getElementByName('person3').value;

您可以获得这些值。然后，您有 3 个项目，要与所有项目进行比较，您只需进行 3 次检查：

if(x == y || x == z || y == z){
    ...
}

或者您可以将所有值放入一个数组中，然后拼接出第一个匹配项，然后检查它是否再次出现。

//get all selects
var selects = document.getElementsByTagName('select');
var setOfPeople = [];
for(i in selects){
    setOfPeople[i] = selects[i].name;
}
var selections = [];
//put everything in an array
for(i in setOfPeople){
    selections[i] = document.getElementByName(setOfPeople[i]).value;
}
for(i in setOfPeople){
    var val = document.getElementByName(setOfPeople[i]).value;

    //make sure the element is in the selection array
    if(selections.indexOf(val) != -1){
        //rip out first occurrence
        selections.splice(selections.indexOf(val), 1);
    }

    //check for another occurrence
    if(selections.indexOf(val) != -1){
        ...
    }
}

【讨论】：

一旦所有选择都在一个数组中，您也可以拼接出该数组的第一个元素，并寻找另一个出现，而不是再次循环 setOfPeople，但我不比如修改我循环的数组，所以我没有那样做。
这个方法不错，我只需要在传入人数后动态创建数组元素？
我会遍历所有<select> 标签，然后用元素的名称填充一个数组，然后您就可以执行我发布的操作了。 var selects = document.getElementsByTagName('select');var setOfPeople = [];for(i in selects){setOfPeople[i] = selects[i].name;}
太好了，这种循环正是我想要的。但是得到一个错误： Nominees[i] = selects[i].name; （selects[i] 未定义）。此外，会有一个实例，其中并替换为纯文本（撤回）跨度>
由于某种原因，这似乎循环了太多次。在最后的循环中，发生了一个未定义的错误