突出顯示與js的選擇菜單

Question

我有多個選擇供用戶選擇。我需要防止重複並提醒用戶重複。我不知道我是否需要使用不同的ID，或者我可以爲所有選擇使用一個ID。我需要重複選擇來提醒紅色。

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

，這裏是我的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; 
} 

不知道我做錯了。任何幫助將受到歡迎。
這裏是我的 Fiddle

Answer 1

確定 - 計劃B，我寫了很多的垃圾最後一次。這一個使用一個數組來保存使用的值，並檢查下一個Select的值是否是該數組的成員。必須更簡單..

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"; 
    } 

} 
}