select选中后唯一性判定及重置实现

本文实现一个小功能：select选中后，判断当前值不与同名select组中所有值冲突，若冲突，提示并还原select值；若不冲突，则完成选择；

逻辑：首先设置一个JavaScript全局变量selectValue,用来存储选中select change之前的值，通过onmouseove中的方法赋值；onchange方法进行值冲突与否的判断。

 

Html：

<select name="select" οnmοuseοver="selectCheck(this,'value');" οnchange="selectCheck(this,'check');">
			<option value="what" selected>what</option>
			<option value="why">why</option>
			<option value="how">how</option>
			<option value="who">who</option>
			<option value="where">where</option>
		</select>
		<select name="select" οnmοuseοver="selectCheck(this,'value');" οnchange="selectCheck(this,'check');">
			<option value="what">what</option>
			<option value="why" selected>why</option>
			<option value="how">how</option>
			<option value="who">who</option>
			<option value="where">where</option>
		</select>
		<select name="select" οnmοuseοver="selectCheck(this,'value');" οnchange="selectCheck(this,'check');">
			<option value="what">what</option>
			<option value="why">why</option>
			<option value="how" selected>how</option>
			<option value="who">who</option>
			<option value="where">where</option>
		</select>

 

JavaScript：

<script type="text/javascript">
			var selectValue="";
			function selectCheck(selectObj,action)
			{
				if(action=="value")
				{
					selectValue=selectObj.value;
				}
				else if(action=="check")
				{
						selectObj.style.backgroundColor="";
						var currentValue=selectObj.value;
						var selects=document.getElementsByName("select");
						for(var i=0;i<selects.length;i++)
						{
							if((selectObj!=selects[i])&&(selects[i].value==currentValue))
							{
								selectObj.style.backgroundColor="red";
								alert("已存在");
								selectObj.value=selectValue;
								break;
							}
						}
				}
			}
</script>