用js突出显示选择菜单

Highlighting select menu with js

本文关键字：选择 菜单 显示 js      更新时间：2023-09-26

我有多个选项供用户选择。我需要防止重复并提醒用户他们的重复。我不知道我是否需要使用不同的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

好的-计划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";
    }
} 
}

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

我会这样做——您需要在每个内联事件调用中传递"this"作为参数。

相关文章：