资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS ListBox的简单功能实现代码
页面效果如下：
代码也贴出来跟大家分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0Afunction%20addIt()%7B%20%0D%0Avar%20input%20%3D%20document.getElementById(%22input%22)%3B%20%0D%0Avar%20output%20%3D%20document.getElementById(%22output%22)%3B%20%0D%0Afor(i%20%3D%200%3B%20i%20%3C%20input.length%3B%20i%20%2B%2B%20)%20%7B%20%0D%0Aif(input%5Bi%5D.selected%20%3D%3D%20true)%20%7B%20%0D%0Aif(%20output.length%20%3D%3D%200)%7B%20%0D%0Avar%20option%20%3D%20new%20Option()%3B%20%0D%0Aoption.text%20%3D%20input%5Bi%5D.innerText%3B%20%0D%0Aoutput.add(option)%3B%20%0D%0A%7D%20%0D%0A%0D%0Avar%20isExist%20%3D%20false%3B%20%0D%0Afor(j%20%3D%200%3B%20j%20%3C%20output.length%3B%20j%20%2B%2B%20)%7B%20%0D%0Aif%20(output%5Bj%5D.text%20%3D%3D%20input%5Bi%5D.innerText)%7B%20%0D%0AisExist%20%3D%20true%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Aif%20(isExist%20%3D%3D%20false)%7B%20%0D%0Avar%20option%20%3D%20new%20Option()%3B%20%0D%0Aoption.text%20%3D%20input%5Bi%5D.innerText%3B%20%0D%0Aoutput.add(option)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20deleteIt()%7B%20%0D%0Avar%20output%20%3D%20document.getElementById(%22output%22)%3B%20%0D%0Afor(i%20%3D%200%3B%20i%3Coutput.length%3B%20i%2B%2B)%7B%20%0D%0Aif%20(output%5Bi%5D.selected%20%3D%3D%20true)%7B%20%0D%0Aoutput.options.removeChild(output%5Bi--%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0A%2F%2F%20--%3E%20%0D%0A%3C%2Fscript%3E"> <table width="80%" border="0" align="center" style="margin-top:20px;"> <tr> <td align="right"> <select name="input" size="10" multiple="multiple" id="input" style="width:200px; font-size:16px"> <option>美元/英镑</option> <option>美元/港币</option> <option>美元/新加坡元</option> <option>美元/日元</option> <option>美元/加拿大元</option> <option>美元/欧元</option> </select> </td> <td align="center"> <p> <input type="button" name="Submit" value="增 加" onclick="addIt()"/> </p> <p> <input type="button" name="Submit2" value="删 除" onclick="deleteIt()"/> </p> </td> <td> <select name="output" size="10" multiple="multiple" id="output" style="width:200px; font-size:16px"> </select> </td> </tr> </table> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程
