管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20addTo%20%3D%20document.getElementById(%22addto%22)%3B%20%0D%0Avar%20moveBack%20%3D%20document.getElementById(%22moveback%22)%3B%20%0D%0Avar%20selectLeft%20%3D%20document.getElementById(%22selectleft%22)%3B%20%0D%0Avar%20selectRight%20%3D%20document.getElementById(%22selectright%22)%3B%20%0D%0Avar%20count%20%3D%200%3B%20%0D%0AaddTo.onclick%20%3D%20addOption%3B%20%0D%0AmoveBack.onclick%20%3D%20delOption%3B%20%0D%0A%2F%2F%E8%BF%99%E4%B8%AA%E5%87%BD%E6%95%B0%E6%A3%80%E9%AA%8C%E4%BC%A0%E5%85%A5%E7%9A%84%E5%80%BC%E6%98%AF%E5%90%A6%E5%9C%A8%E6%9C%89%E8%BE%B9%E5%87%BA%E7%8E%B0%E8%BF%87%EF%BC%81%20%0D%0Afunction%20hasOption(str)%7B%20%0D%0Afor(var%20i%3D0%3Bi%3Cdocument.getElementById(%22selectRight%22).options.length%3Bi%2B%2B)%7B%20%0D%0Aif(document.getElementById(%22selectRight%22).options.value%3D%3Dstr)%7B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20true%3B%20%0D%0A%7D%20%0D%0Afunction%20addOption()%7B%20%0D%0Avar%20nowIndex%20%3D%20document.getElementById(%22selectRight%22).options.length%3B%20%2F%2F%E5%8F%B3%E8%BE%B9%E7%9A%84%E4%B8%8B%E4%B8%80%E4%B8%AA%E7%B4%A2%E5%BC%95%20%0D%0Avar%20selectIndex%20%3D%20document.getElementById(%22selectLeft%22).options.selectedIndex%3B%20%2F%2F%E5%81%9A%E8%BE%B9%E8%A2%AB%E9%80%89%E7%A7%8D%E9%A1%B9%E7%B4%A2%E5%BC%95%20%0D%0Avar%20selectText%20%3D%20document.getElementById(%22selectLeft%22).options%5BselectIndex%5D.text%3B%20%2F%2F%E8%A2%AB%E9%80%89%E7%A7%8D%E9%A1%B9%E6%96%87%E6%9C%AC%20%0D%0Avar%20selectValue%20%3D%20document.getElementById(%22selectLeft%22).options%5BselectIndex%5D.value%3B%20%2F%2F%E8%A2%AB%E9%80%89%E7%A7%8D%E9%A1%B9%E5%80%BC%20%0D%0Aif(selectIndex!%3D-1)%7B%20%0D%0Aif(!(hasOption(selectValue)))%7B%20%2F%2F%E5%A6%82%E6%9E%9C%E9%80%89%E4%BA%86%E4%B8%80%E9%A1%B9%E4%B8%94%E5%8F%B3%E8%BE%B9%E6%B2%A1%E6%9C%89%EF%BC%8C%E6%89%A7%E8%A1%8C%20%0D%0Aif(count%3C3)%7B%20%0D%0Avar%20newoption%20%3D%20new%20Option(selectText%2CselectValue%2Cfalse%2Cfalse)%3B%20%0D%0Adocument.getElementById(%22selectRight%22).options%5BnowIndex%5D%20%3D%20newoption%3B%20%0D%0Acount%2B%3D1%3B%20%0D%0Adocument.getElementById(%22selectmsg%22).innerHTML%3D%22*%E4%BD%A0%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%89%E6%8B%A9%22%2B(3-count)%2B%22%E4%B8%AA%E7%9F%A5%E8%AF%86%E7%82%B9%22%3B%20%0D%0A%7Delse%20%0D%0Adocument.getElementById(%22selectmsg%22).innerHTML%3D%22%3Cfont%20color%3Dred%3E*%E6%B8%A9%E9%A6%A8%E6%8F%90%E7%A4%BA%2C%E4%BD%A0%E5%8F%AA%E8%83%BD%E9%80%89%E6%8B%A9%E4%B8%89%E9%A1%B9%EF%BC%81%3C%2Ffont%3E%22%3B%20%0D%0A%7Delse%20%0D%0Adocument.getElementById(%22selectmsg%22).innerHTML%3D%22%3Cfont%20color%3Dred%3E*%E6%B8%A9%E9%A6%A8%E6%8F%90%E7%A4%BA%2C%E4%B8%8D%E8%83%BD%E9%87%8D%E5%A4%8D%E9%80%89%E6%8B%A9%EF%BC%81%3C%2Ffont%3E%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20delOption()%7B%20%0D%0Avar%20selectIndex%20%3D%20document.getElementById(%22selectRight%22).options.selectedIndex%3B%20%0D%0Aif(selectIndex!%3D-1)%7B%20%0D%0Adocument.getElementById(%22selectRight%22).options%5BselectIndex%5D%20%3D%20null%3B%20%2F%2F%E6%B8%85%E7%A9%BA%E9%80%89%E7%A7%8D%E9%A1%B9%20%0D%0Acount-%3D1%3B%20%0D%0Adocument.getElementById(%22selectmsg%22).innerHTML%3D%22*%E4%BD%A0%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%89%E6%8B%A9%22%2B(3-count)%2B%22%E4%B8%AA%E7%9F%A5%E8%AF%86%E7%82%B9%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20hasOption(str)%7B%20%0D%0Avar%20tmp%3Dfalse%3B%20%0D%0Afor(i%3D0%3Bi%3Ccount%3Bi%2B%2B)%7B%20%0D%0Aif(str%3D%3Ddocument.getElementById(%22selectRight%22).options%5Bi%5D.value)%7B%20%0D%0Atmp%3Dtrue%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0Atmp%3Dfalse%3B%20%0D%0A%7D%20%0D%0Areturn%20tmp%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

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

教程首页更多教程