<img src="http://files.jb51.net/upload/20090715000536607.gif" border="0" alt="JS はリスト ボックス項目効果 code_form 効果を動的に追加します" ><br><div class="htmlarea"> <textarea id="runcode81527"> <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> </textarea> <br><input onclick="runEx('runcode81527')" type="button" value="运行代码"><input onclick="doCopy('runcode81527')" type="button" value="复制代码"> <input onclick="doSave(runcode81527)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A すべて選択 注: </a>外部 Js を導入する必要がある場合は、</div> を実行するために更新する必要があります]<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>