0

这个问题是基于这个问题

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't been selected两次？

谢谢。

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 循环以确保没有一个选项被选择了两次？

4

2 回答 2

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>
于 2013-10-03T16:22:41.880 回答
1

如果你使用

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){
        ...
    }
}
于 2013-10-03T16:53:42.083 回答