站 内 搜 索
推 荐 合 作 商
优 秀 内 容 推 荐
  您当前位置：中国素材首页 >> 网页特效 >> 下拉框 >> 非常有意思的两个下拉菜单(不可能选择相同的值)
 
非常有意思的两个下拉菜单(不可能选择相同的值)
中国素材网 www.sucai.com 2007-7-20 15:10:00 流量数:
请根据需要修改
[查看演示]  源码如下
----------------------------------------------------------------------------------------
要完成此效果需要两个步骤

第一步：把如下代码加入到<head>区域中

<script>
var OptLstTxt = new Array;
var OptLstVal = new Array;
var OptLen = 0;
function NoDupl(SelObjFrom, SelObjTo) {
var OldToVal = SelObjTo.options[SelObjTo.selectedIndex].value;
if (OptLen == 0) {
OptLen = SelObjFrom.length;
for (var i = 1; i < OptLen; i++) {
OptLstTxt[i] = SelObjFrom.options[i].text;
OptLstVal[i] = SelObjFrom.options[i].value;
}
}
var j = 1;
for (var i = 1; i < OptLen; i++) {
if (OptLstVal[i] != SelObjFrom.options[SelObjFrom.selectedIndex].value) {
if (j == SelObjTo.length) {
SelObjTo.options[j] = new Option(OptLstTxt[i]);
}
else {
SelObjTo.options[j].text = OptLstTxt[i];
}
SelObjTo.options[j].value = OptLstVal[i];
if (OptLstVal[i] == OldToVal) {
SelObjTo.selectedIndex = j;
}
j++;
}
}
if (SelObjTo.length > j)
SelObjTo.options[(SelObjTo.length - 1)] = null;
}
</script>


第二步：把如下代码加入到<body>区域中

<form method="POST" name="MForm">
<div align="center">下列四个选项中试试能不能选择重复的: <br>
<select name="Color_1" onChange="NoDupl(this,document.MForm.Color_2)">
<option selected value=''>请选择你喜欢的颜色</option>
<option value='R'>Red</option>
<option value='J'>Yellow</option>
<option value='G'>Green</option>
<option value='B'>Blue</option>
</select>
<select name="Color_2" onChange="NoDupl(this,document.MForm.Color_1)">
<option selected value=''>请选择你喜欢的颜色</option>
<option value='R'>Red</option>
<option value='J'>Yellow</option>
<option value='G'>Green</option>
<option value='B'>Blue</option>
</select>
</div>
</form>