Question

当选择了其中一个SELECT框的选项时，我希望其余部分重新填充，没有所说的选项，而是有一种简单的方法来循环遍历所有这些选择项，以确保相同的选项没有'被选中两次？

感谢。

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循环以确保没有选择任何选项？

Answer 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>

Answer 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){
        ...
    }
}

JavaScript - 检查多个SELECT以获取重复选项

2 个答案: