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

<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>*温馨提示,你只能选择三项！</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需刷新才能执行]