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

更新时间：2009年07月15日 00:05:45 作者：

动态添加列表框项，不错的效果，需要用的朋友可以参考下。

<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="&gt;&gt;" /> <input type="button" id="moveback" class="operateBtn" value="&lt;&lt;" /> </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>*温馨提示,你只能选择三项！</font>"; }else document.getElementById("selectmsg").innerHTML="<font color=red>*温馨提示,不能重复选择！</font>"; } } 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS
列表框

在textarea中屏蔽js的某个function的javascript代码
在textarea中屏蔽js的某个function的javascript代码...
2007-04-04
javascript 焦点的两个问题
# 页面加载完后，光标自动定位到R0表单 # 问题二：在R0表单输入1，回车后跳转到R1，输入2回车后跳转到R2，输入3回车后跳转到R3
2009-07-07
JavaScript 克隆双重输入文字
JavaScript双重输入文字，会适时将第一个文本框的文字复制到第二个文本框中，像克隆一样，有意思吧，还没有搞懂这功能我们平时在哪儿能用上，先收藏一下。
2010-10-10
当文本框的值发生改变时，触发事件，在IE中有效
当文本框的值发生改变时，触发事件，在IE中有效，具体的大家可以测试下。
2009-09-09
让html的text输入框只能输入数字和1个小数点(0-59之间可改)
今天有同事需要这个功能，主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题，特整理了下面的代码，需要的朋友可以参考下。
2011-11-11
限制复选框的最大可选数的js代码
不错的一个限制同时选择的复选框的最多个数
2008-10-10
select选择事件问题
select选择事件问题...
2007-02-02
checkbox 复选框不能为空
checkbox复选框不能为空，至少有一个选项
2009-07-07
FileUpload 控件禁止手动输入或粘贴的实现代码
FileUpload 控件禁止手动输入或粘贴的实现代码，经常用于比较安全无误的输入，例如身份证号码，密码，银行账户等。
2010-04-04
刷新时清空文本框内容的js代码
刷新时清空文本框内容的js代码...
2007-04-04