相思资源网 Design By www.200059.com
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!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> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript"></script> <META NAME="Description" CONTENT="Power by hill"> </head> <body> <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p> <form method="post" name="myform"> <table border="0" width="300"> <tr> <td width="40%"> <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="山东">山东</option> <option value="安徽">安徽</option> <option value="重庆">重庆</option> <option value="福建">福建</option> <option value="甘肃">甘肃</option> <option value="广东">广东</option> <option value="广西">广西</option> <option value="贵州">贵州</option> <option value="海南">海南</option> <option value="河北">河北</option> <option value="黑龙江">黑龙江</option> </select> </td> <td width="20%" align="center"> <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"> <br/> <br/> <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)"> </td> <td width="40%"> <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> </select> </td> <td> <button onclick="changepos(list2,-1)" type="button">上移</button> <br/> <button onclick="changepos(list2,1)" type="button">下移</button> </td> </tr> </table> 值:<input type="text" name="city" size="40"> </form> <script language="JavaScript"> function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); ii=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i<geto.options.length;i++){ allvalue +=geto.options[i].value + ","; } return allvalue; } function changepos(obj,index) { if(index==-1){ if (obj.selectedIndex>0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } } else if(index==1){ if (obj.selectedIndex<obj.options.length-1){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) } } } </script> </body> </html>
好了,代码到此介绍,以上所述是小编给大家介绍的JS动态的把左边列表添加到右边的实现代码(可上下移动),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
标签:
js,左边列表添加到右边
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无JS动态的把左边列表添加到右边的实现代码(可上下移动)的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。