多选移动列表操作
<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' οndblclick="move('left','right')"><option>java</option><option>c++</option><option>數據結構</option></select></td><td><input type="button" value='-->' class='input' οnclick="move('left','right')"/><br/><input type="button" value='-->>' class='input' οnclick="moveAll('left','right')"/><br/><input type="button" value='<--' class='input' οnclick="move('right','left')"/><br/><input type="button" value='<<--' class='input' οnclick="moveAll('right','left')"/><br/></td><td><select class='s' id='right' multiple='multiple' οndblclick="move('right','left')" ></select></td></tr></tbody></table><div align='center'><input type='submit' value='提交'/></div></div></body></html>
總結
- 上一篇： 再学 GDI+[83]: TGPImag
- 下一篇： java实现二叉树的构建以及3种遍历方法