JavaScript - Check multiple SELECT for duplicate options

Question

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?

jQuery an option for you or do you need plain JS?

j08691
– j08691

2013-10-03 16:08:50 +00:00
Commented Oct 3, 2013 at 16:08 — j08691
– j08691, Commented Oct 3, 2013 at 16:08
@j08691 plain JS unfortunately

BigDistance
– BigDistance

2013-10-04 10:27:31 +00:00
Commented Oct 4, 2013 at 10:27 — BigDistance
– BigDistance, Commented Oct 4, 2013 at 10:27

Harold Sota · Accepted Answer · 2013-10-03 17:02:35Z

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>

edited Oct 3, 2013 at 17:02

answered Oct 3, 2013 at 16:22

Harold Sota

7,58613 gold badges60 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

j08691 Over a year ago

If I make a section for person #1, and then change my mind, what happens?

Harold Sota Over a year ago

in other selects you can't select person #1, copy and paste the HTML here: w3schools.com/js/tryit.asp?filename=tryjs_events and try by your self

j08691 Over a year ago

I'll put it a different way. If I pick #2 from the first select I can see it gets disabled from the other selects. Fine. However if I change my mind and pick #3 from the first select, now #3 AND #2 are disabled.

BigDistance Over a year ago

@Haroldis ,thanks this seems like a good solution, however the number of people is created on the fly, so there's not always three. Also, the Person# selector seems to ignore the formatting?

Harold Sota Over a year ago

How you generate the id or name?

mduleone · Accepted Answer · 2013-10-04 20:18:53Z

1

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

edited Oct 4, 2013 at 20:18

answered Oct 3, 2013 at 16:53

mduleone

8311 bronze badges

8 Comments

mduleone Over a year ago

Once all of the selections are in an array, you could also just splice out the first element of that array, and look for another occurrence, instead of looping over the setOfPeople again, but I don't like modifying arrays that I'm looping over, so I didn't do it that way.

BigDistance Over a year ago

This is a good method, I just need to create the array element on the fly, after passing in number of people?

mduleone Over a year ago

I would loop through all of the <select> tags, and then populate an array with the names of the elements, then you can do what I posted. var selects = document.getElementsByTagName('select'); var setOfPeople = []; for(i in selects){setOfPeople[i] = selects[i].name;}

BigDistance Over a year ago

Great, this sort of loop was exactly what I was looking for. Getting an error though: Nominees[i] = selects[i].name; (selects[i] is undefined). Also, there will be an instance where <select> tag will be disabled and should not be counted (person has withdrawn) - any easy workaround to this, otherwise I will remove this <select> and replace with plain text (Withdrawn)

BigDistance Over a year ago

For some reason this seems to be looping through too many times. On the final loop through, an undefined error occurs

|

Collectives™ on Stack Overflow

JavaScript - Check multiple SELECT for duplicate options

2 Answers 2

5 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related