开发学院网页设计 JavaScript Javascript 动态添加&删除列表框内容阅读

Javascript 动态添加&删除列表框内容

　2010-09-14 13:34:54　来源：WEB开发网　　　

核心提示： <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title>madebymeixx&l

<html>　　　　 <head>　　　　 <meta　　　　http-equiv="Content-Type"　　　　content="text/html;　　　　charset=gb2312">　　　　 <title>made　　　　by　　　　meixx</title>　　　　 <script　　　　language="javascript">　　　　 <!--　　　　 function　　　　Add(ObjSource,ObjTarget){　　　　 for(var　　　　i=0;i<ObjSource.length;i++){　　　　 if(ObjSource.options[i].selected){　　　　 var　　　　opt=document.createElement("OPTION");　　　　 ObjTarget.add(opt);　　　　 opt.value=ObjSource.options[i].value;　　　　 opt.text=ObjSource.options[i].text;　　　　 ObjSource.options.removeChild(ObjSource.options[i--]);　　　　 opt.selected=true;　　　　 }　　　　 }　　　　 }　　　　 function　　　　AddAll(ObjSource,ObjTarget){　　　　 SelectAll(ObjSource);　　　　 Add(ObjSource,ObjTarget);　　　　 }　　　　 function　　　　SelectAll(ObjSource){　　　　 for(var　　　　i=0;i<ObjSource.length;i++){　　　　 ObjSource.options[i].selected=true;　　　　 }　　　　 }　　　　 function　　　　doSubmit(){　　　　 SelectAll(frmDisplay.dltTarget);　　　　 //frmDisplay.action="";//设置form　　　　提交的action　　　　 alert(frmDisplay.action);　　　　 //frmDisplay.submit();//取消注释即可,提交上去的options　　　　 }　　　　 //->　　　　 </script>　　　　 </head>　　　　 <body>　　　　 <table　　　　width="350"　　　　border="1"　　　　style="border-collapse:collapse　　　　"　　　　bordercolor="#111111"　　　　cellpadding="0"　　　　cellspacing="0">　　　　　　 <tr>　　　　　　　　 <td　　　　width="150">　　　　 <select　　　　name="dltSource"　　　　size="10"　　　　multiple　　　　style="width:100%　　　　">　　　　 <option　　　　value="0">辽宁</option>　　　　 <option　　　　value="0">黑龙江</option>　　　　 <option　　　　value="0">吉林</option>　　　　 <option　　　　value="0">河北</option>　　　　 <option　　　　value="0">河南</option>　　　　 <option　　　　value="0">江苏</option>　　　　 <option　　　　value="0">浙江</option>　　　　 <option　　　　value="0">海南</option>　　　　 <option　　　　value="0">福建</option>　　　　 <option　　　　value="0">山东</option>　　　　 <option　　　　value="0">青海</option>　　　　 <option　　　　value="0">宁夏</option>　　　　 <option　　　　value="0">内蒙古</option>　　　　 <option　　　　value="0">新疆</option>　　　　 <option　　　　value="0">陕西</option>　　　　 </select>　　　　 </td>　　　　　　　　 <td　　　　width="50"　　　　valign="middle">　　　　 <p　　　　style="width:100%"　　　　align="center"><input　　　　type="button"　　　　value="->"　　　　onClick="Add(document.all.dltSource,frmDisplay.dltTarget)"　　　　title="添加"></p>　　　　 <p　　　　style="width:100%"　　　　align="center"><input　　　　type="button"　　　　value="=>"　　　　onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)"　　　　title="添加全部"></p>　　　　 <p　　　　style="width:100%"　　　　align="center"><input　　　　type="button"　　　　value="<-"　　　　onClick="Add(frmDisplay.dltTarget,document.all.dltSource)"　　　　title="删除"></p>　　　　 <p　　　　style="width:100%"　　　　align="center"><input　　　　type="button"　　　　value="<="　　　　onClick="AddAll(frmDisplay.dltTarget,document.all.dltSource)"　　　　title="删除全部"></p>　　　　 </td>　　　　　　　　 <td　　　　width="150">　　　　 <form　　　　id="frmDisplay"　　　　action="xxx.jsp"　　　　method="post"　　　　style="margin:0　　　　">　　　　 <select　　　　name="dltTarget"　　　　size="10"　　　　multiple　　　　style="width:100%　　　　"></select>　　　　 </form>　　　　 </td>　　　　　　 </tr>　　　　　　 <tr>　　　　　　　　 <td　　　　align="center">作者:梅雪香</td>　　　　　　　　 <td　　　　align="center">ver:1.0</td>　　　　　　　　 <td　　　　align="center">　　　　 <input　　　　type="reset"　　　　onClick="javascript:window.location.reload();"　　　　value="重置">　　　　　 <input　　　　type="button"　　　　value="提交"　　　　onClick="doSubmit()">　　　　 </td>　　　　　　 </tr>　　　　 </table>　　　　 </body>　　　　 </html>