JS 動(dòng)態(tài)添加列表框項(xiàng)效果代碼

2019-11-21 01:16:14

字體：大中小

供稿：網(wǎng)友

<table width="200" border="0" cellspacing="0"> <tr> <td colspan="3"><span id="selectmsg">*請(qǐng)選擇1-3個(gè)知識(shí)點(diǎn).</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; //這個(gè)函數(shù)檢驗(yàn)傳入的值是否在有邊出現(xiàn)過！ 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; //右邊的下一個(gè)索引 var selectIndex = document.getElementById("selectLeft").options.selectedIndex; //做邊被選種項(xiàng)索引 var selectText = document.getElementById("selectLeft").options[selectIndex].text; //被選種項(xiàng)文本 var selectValue = document.getElementById("selectLeft").options[selectIndex].value; //被選種項(xiàng)值 if(selectIndex!=-1){ if(!(hasOption(selectValue))){ //如果選了一項(xiàng)且右邊沒有，執(zhí)行 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)+"個(gè)知識(shí)點(diǎn)"; }else document.getElementById("selectmsg").innerHTML="<font color=red>*溫馨提示,你只能選擇三項(xiàng)！</font>"; }else document.getElementById("selectmsg").innerHTML="<font color=red>*溫馨提示,不能重復(fù)選擇！</font>"; } } function delOption(){ var selectIndex = document.getElementById("selectRight").options.selectedIndex; if(selectIndex!=-1){ document.getElementById("selectRight").options[selectIndex] = null; //清空選種項(xiàng) count-=1; document.getElementById("selectmsg").innerHTML="*你還可以選擇"+(3-count)+"個(gè)知識(shí)點(diǎn)"; } } 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需刷新才能執(zhí)行]

上一篇：js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE和FF

下一篇：兼容IE/Firefox/Opera/Safari的檢測(cè)頁(yè)面裝載完畢的腳本Ext.onReady的實(shí)現(xiàn)