多选移动列表操作
<html> <head> <title>多选移动列表操作</title> <meta http-equiv='Content-Type' content='text/css;charset=utf-8'/> <script> </script> <style> .yemian{ margin-left:30%; width:500px; height:400px; background-color:cyan; } .s{ width:150px; height:250px; } .input{ width:50px; height:30px; } </style> <script> function move(srcId,desId){ var src=document.getElementById(srcId); var des=document.getElementById(desId); var flag=true; for(var i=src.length-1;i>=0;i--){ if(src.options[i].selected){ var op=new Option(src.options[i].value,src.options[i].text); //方法一: des.options[des.options.length]=op; src.options[i]=null; //方法二:下面这条语句除了赋值之外,还删除了src.options数组中的src.options[i] //所以不需要执行src.options[i]=null; //des.options[des.options.length]=src.options[i]; flag=false; } } if(flag){ alert("你必须选择至少一项!"); } } function moveAll(srcId,desId){ var src=document.getElementById(srcId); var des=document.getElementById(desId); for(var i=src.length-1;i>=0;i--){ des.options[des.options.length]=src.options[i]; src.options[i]=null; } } </script> </head> <body> <div class='yemian' > <h1 align='center'>多选移动操作</h1> <table align='center' cellspacing='20' cellpadding='10px';> <tbody> <tr> <td> <select class='s' multiple='multiple' id='left' ondblclick="move('left','right')"> <option>java</option> <option>c++</option> <option>数据结构</option> </select> </td> <td> <input type="button" value='-->' class='input' onclick="move('left','right')"/><br/> <input type="button" value='-->>' class='input' onclick="moveAll('left','right')"/><br/> <input type="button" value='<--' class='input' onclick="move('right','left')"/><br/> <input type="button" value='<<--' class='input' onclick="moveAll('right','left')"/><br/> </td> <td> <select class='s' id='right' multiple='multiple' ondblclick="move('right','left')" > </select> </td> </tr> </tbody> </table> <div align='center'><input type='submit' value='提交'/></div> </div> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。