首页 >web前端 >js教程 >JS 动态添加列表框项效果代码_表单特效

JS 动态添加列表框项效果代码_表单特效

WBOY原创: 2016-05-16 18:49:571073浏览

<table width="200" border="0" cellspacing="0"> 
<tr> 
<td colspan="3"><span id="selectmsg">*请选择1-3个知识点.</span></td> 
</tr> 
<tr> 
<td><select name="selectleft" size="10" id="selectleft"> 
<option value="1">1213123123</option> 
<option value="2">2123123123</option> 
<option value="3">3213123213</option> 
<option value="4">4123213213</option> 
<option value="5">5213123213</option> 
<option value="6">6213123213</option> 
</select></td> 
<td> 
<input type="button" id="addto" class="operateBtn" value=">>">
 
<input type="button" id="moveback" class="operateBtn" value="<<"> 
</td> 
<td><select name="selectright" size="10" id="selectright"> 
</select></td> 
</tr> 
</table> 
<script type="text/javascript"> 
var addTo = document.getElementById("addto"); 
var moveBack = document.getElementById("moveback"); 
var selectLeft = document.getElementById("selectleft"); 
var selectRight = document.getElementById("selectright"); 
var count = 0; 
addTo.onclick = addOption; 
moveBack.onclick = delOption; 
//这个函数检验传入的值是否在有边出现过！ 
function hasOption(str){ 
for(var i=0;i<document.getElementById("selectRight").options.length;i++){ 
if(document.getElementById("selectRight").options.value==str){ 
return false; 
} 
} 
return true; 
} 
function addOption(){ 
var nowIndex = document.getElementById("selectRight").options.length; //右边的下一个索引 
var selectIndex = document.getElementById("selectLeft").options.selectedIndex; //做边被选种项索引 
var selectText = document.getElementById("selectLeft").options[selectIndex].text; //被选种项文本 
var selectValue = document.getElementById("selectLeft").options[selectIndex].value; //被选种项值 
if(selectIndex!=-1){ 
if(!(hasOption(selectValue))){ //如果选了一项且右边没有，执行 
if(count<3){ 
var newoption = new Option(selectText,selectValue,false,false); 
document.getElementById("selectRight").options[nowIndex] = newoption; 
count+=1; 
document.getElementById("selectmsg").innerHTML="*你还可以选择"+(3-count)+"个知识点"; 
}else 
document.getElementById("selectmsg").innerHTML="<font color=red>*温馨提示,你只能选择三项！"; 
}else 
document.getElementById("selectmsg").innerHTML="<font color=red>*温馨提示,不能重复选择！"; 
} 
} 
function delOption(){ 
var selectIndex = document.getElementById("selectRight").options.selectedIndex; 
if(selectIndex!=-1){ 
document.getElementById("selectRight").options[selectIndex] = null; //清空选种项 
count-=1; 
document.getElementById("selectmsg").innerHTML="*你还可以选择"+(3-count)+"个知识点"; 
} 
} 
function hasOption(str){ 
var tmp=false; 
for(i=0;i<count;i++){ 
if(str==document.getElementById("selectRight").options[i].value){ 
tmp=true; 
break; 
} 
else 
tmp=false; 
} 
return tmp; 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：DOM 基本方法_基础知识下一篇：javascript iframe内的函数调用实现方法_javascript技巧

查看更多

JS 动态添加列表框项效果代码_表单特效

相关文章