Highlighting select menu with js

Question

I have multiple selects for a user to chose from. I need to prevent duplicates and alert user of their duplicates. I don't know if i need to use different id's or i could use just one id for all of the selects. I need the duplicate select to alert red.

<form method="post" action="">
<select name="drop1" id="drop1" onchange="checkDropdowns()">
<option value=" " selected="selected"> </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<select name="drop2" id="drop2" onchange="checkDropdowns()">
<option value=" " selected="selected"> </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<select name="drop3" id="drop3" onchange="checkDropdowns()">
<option value=" " selected="selected"> </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<select name="drop4" id="drop4" onchange="checkDropdowns()">
<option value=" " selected="selected"> </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>

here is my Javascript

function checkDropdowns()
 {
  var iDropdowns = 4;
  var sValue;
  var sValue2;
for(var i = 1; i <= iDropdowns; ++i)
{
    sValue = document.getElementById('drop' + i).value;
    for(var j = 1; j <= iDropdowns; ++j)
    {
        sValue2 = document.getElementById('drop' + j).value;
        if ( i != j && sValue == sValue2 )
        {   
document.getElementById('drop' + j).style.border = "solid 1px red";   
            return false;
        }
    }
} 
return true;
 }

Not sure what i am doing wrong. Any help will be welcome.
Here is my Fiddle

WindsorAndy · Answer 1 · 2015-02-05T19:21:40.823

0

Ok - plan B, I wrote a lot of rubbish last time. This one uses an array to save used values and checks if the next Select's value is a member of that array. Must simpler..

function checkDropdowns(){

var iDropdowns = 4,
    sValue,
    used =new Array();

for(var i = 1; i < iDropdowns+1; i++)  {
    sValue = document.getElementById('drop' + i).value;
    if (sValue && used.indexOf(sValue)!==-1) {
        document.getElementById('drop' +i).style.backgroundColor="#cc0000";
    }
    else {
        used.push(sValue);
        document.getElementById('drop' +i).style.backgroundColor="#fff";
    }

} 
}

edited Feb 05 '15 at 19:21

answered Feb 05 '15 at 17:24

WindsorAndy

237
1
11

Andy thanks for your help. I was just playing with this code and realized it only works in one direction also does not fully work. Maybe the JavaScript i wrote needs to be completely redone with a different approach . – Rooster Feb 05 '15 at 18:42
Rooster - you're right I wrote a load of junk sorry! Here's a working version with an array to prevent duplicates and just a single cycle through the Selects – WindsorAndy Feb 05 '15 at 19:22

score 0 · Answer 2 · answered Oct 12 '22 at 09:53

function checkDropdowns(e){
    var dup = false;
    document.querySelectorAll("select").forEach(function(s){
        if (e != s && e.value == s.value){
            dup = true;
        }   
    });
    e.style.border  = dup ? "1px solid #f00" : "inherit";  
}

I'd do it this way - you'll need to pass 'this' as a parameter in each of your inline event calls.

Highlighting select menu with js

2 Answers2