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

} 
}

使用js突出显示选择菜单

1 个答案: