首页 > 网络编程 > JavaScript > 表单特效 > select内容互相移动 javascript select控件间内容互相移动 2009-11-24 01:32:42 作者： javascript select中内容互相移动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <script language="javascript"> function add(){ var opt=selectfrom.options; len=opt.length; for(i=len-1;i>-1;i--){ if(opt[i].selected){ select2.appendChild(opt[i]); } } } function addAll(){ var opt=selectfrom.options; len=opt.length; for(i=len-1;i>-1;i--){ select2.appendChild(opt[i]); } } function del(){ var opt=select2.options; len=opt.length; for(i=len-1;i>-1;i--){ if(opt[i].selected){ selectfrom.appendChild(opt[i]); } } } function delAll(){ var opt=select2.options; len=opt.length; for(i=len-1;i>-1;i--){ selectfrom.appendChild(opt[i]); } } </script> <body> <table width="27%" height="194" border="0" cellpadding="1" cellspacing="0"> <tr> <td width="21%"><select id="selectfrom" size="15" multiple="multiple" style="width:100px"> <option>a</option> <option>b</option> <option>c</option> <option>d</option> <option>e</option> <option>f</option> <option>g</option> <option>h</option> <option>i</option> <option>j</option> <option>k</option> <option>j</option> <option>m</option> <option>n</option> </select></td> <td width="57%"><p align="center"> <input name="addAll" type="button" id="addAll" value=" >> " style="width:40px" onclick="addAll()"/> </p> <p align="center"> <input name="add" type="button" id="add" style="width:40px" value=" > " onclick="add()"/> </p> <p align="center"> <input name="del" type="button" id="del" value=" < " style="width:40px" onclick="del()"/> </p> <p align="center"> <input name="delAll" type="button" id="delAll" value=" << " style="width:40px" onclick="delAll()"/> </p></td> <td width="22%"><select id="select2" size="15" multiple="multiple" style="width:100px"> </select></td> </tr> </table> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:JavaScript Select和Option列表元素上下左右移动jquery select多选框的左右移动 具体实现代码jQuery操作Select的Option上下移动及移除添加等等下拉列表select 由左边框移动到右边示例两个select多选模式的选项相互移动(示例代码)基于jquery实现select选择框内容左右移动添加删除代码分享jquery实现select选择框内容左右移动代码分享
