JavaScript-选中多个重复选择选项_Javascript_Arrays_Loops_Element_Document

JavaScript-选中多个重复选择选项

javascript arrays loops

JavaScript-选中多个重复选择选项,javascript,arrays,loops,element,document,Javascript,Arrays,Loops,Element,Document,这个问题是基于当从其中一个选择框中选择一个选项时，我希望重新填充其余的选项，而不使用上述选项，但是，是否有一种简单的方法来循环所有这些选择项，以确保相同的选项不会被选择两次 <!DOCTYPE html> <html> <head> <script> function doAction(el) { for (var i = 0; i < document.getElementById('person2').length; i++)

这个问题是基于

当从其中一个选择框中选择一个选项时，我希望重新填充其余的选项，而不使用上述选项，但是，是否有一种简单的方法来循环所有这些选择项，以确保相同的选项不会被选择两次

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

谢谢

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

如果使用

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

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

jQuery为您选择一个选项，还是您需要普通JS？@j08691 plain JS不幸的是，如果我为person 1创建了一个部分，然后改变主意，会发生什么？在其他选择中，您不能选择person 1，请将HTML复制并粘贴到此处：然后自己尝试。我会用不同的方式来表达。如果我从第一个选择中选择2，我可以看到它从其他选择中被禁用。好的但是，如果我改变主意，从第一次选择中选择3，现在3和2被禁用。@Haroldis，谢谢，这似乎是一个很好的解决方案，但是人数是动态创建的，所以并不总是有三个人。此外，Person选择器似乎忽略了格式设置？如何生成id或名称？一旦所有选择都在一个数组中，您也可以将该数组的第一个元素拼接出来，然后寻找另一个匹配项，而不是再次循环遍历一组人，但我不喜欢修改循环遍历的数组，所以我没有这样做。这是一个好方法，我只需要在传入人数后动态创建数组元素？我会循环遍历所有标记，然后用元素的名称填充数组，然后你可以执行我发布的操作。var selects=document.getElementsByTagName'select'；var setOfPeople=[]；因为在selects{setOfPeople[i]=selects[i].name；}中的i太棒了，这种循环正是我想要的。但获取错误：被提名人[i]=选择[i].name；选择[i]未定义。此外，还会有一个实例，其中标记将被禁用，并且不应被计算为已撤回的人员-任何简单的解决方法，否则我将删除此项并替换为纯文本撤回，因为某些原因，这似乎循环了太多次。在最后一次循环中，出现未定义的错误