CODEWITHSUNDEEP
javascriptarraysloopselementdocument
BigDistance
BigDistance

Reputation: 135

JavaScript - Check multiple SELECT for duplicate options

This question is based on 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't been selected twice?

Thanks.

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>

Basic Overview: JavaScript loop to ensure none of the options have been selected twice?

Upvotes: 0

Views: 2496

Answers (2)

mduleone
mduleone

Reputation: 83

If you use

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

you can get the values. Then, you have 3 items, to compare against all of them you just have to do 3 checks:

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

Or you could throw all of the values into an array, and then splice out the first occurrence, and then check to see if it occurs again.

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

Upvotes: 1

Harold Sota
Harold Sota

Reputation: 7566

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

Upvotes: 1

Related Questions