这篇文章主要介绍了基于javascript实现单选及多选的向右和向左移动,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下：
方法 一：
<body> <h1>实现单选及多选的向右和向左移动</h1> <div> <span> <select size="10" multiple="multiple"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> <option>选项9</option> <option>选项10</option> </select> <span> <input type="button" value="单个向右移动" /> <input type="button" value="多个向右移动" /> <input type="button" value="单个向左移动" /> <input type="button" value="多个向左移动" /> </span> <span> <select size="10" multiple="multiple"> </select> </span> </span> </div> </body> <script type="text/javascript"> window.onload = function(){} //获取select对象 var lselect=document.getElementById("lselect"); var rselect=document.getElementById("rselect"); //获取lselect和roptions对象中的所有option var loptions=lselect.options; var roptions=rselect.options; function oneRMove(){ for(var i=0;i<loptions.length;i++){ var op=loptions[i]; if(op.selected){ rselect.appendChild(op); break; } } } function moveRMove(){ for(var i=0;i<loptions.length;i++){ var op=loptions[i]; if(op.selected){ rselect.appendChild(op); i--; } } } function oneLMove(){ for(var i=0;i<roptions.length;i++){ var op=roptions[i]; if(op.selected){ lselect.appendChild(op); break; } } } function moveLMove(){ for(var i=0;i<roptions.length;i++){ var op=roptions[i]; if(op.selected){ lselect.appendChild(op); i--; } } } </script>
方法 二：
<script type="text/javascript"> sortitems = 1; function move(fbox,tbox) { for(var i=0; i<fbox.options.length; i++) { if(fbox.options[i].selected && fbox.options[i].value != "") { var no = new Option(); no.value = fbox.options[i].value; no.text = fbox.options[i].text; tbox.options[tbox.options.length] = no; fbox.options[i].value = ""; fbox.options[i].text = ""; } } BumpUp(fbox); if (sortitems) SortD(tbox); } function BumpUp(box) { for(var i=0; i<box.options.length; i++) { if(box.options[i].value == "") { for(var j=i; j<box.options.length-1; j++) { box.options[j].value = box.options[j+1].value; box.options[j].text = box.options[j+1].text; } var ln = i;break; } } if(ln < box.options.length) { box.options.length -= 1; BumpUp(box); } } function SortD(box) { var temp_opts = new Array(); var temp = new Object(); for(var i=0; i<box.options.length; i++) { temp_opts[i] = box.options[i]; } for(var x=0; x<temp_opts.length-1; x++) { for(var y=(x+1); y<temp_opts.length; y++) { if(temp_opts[x].text > temp_opts[y].text) { temp = temp_opts[x].text; temp_opts[x].text = temp_opts[y].text; temp_opts[y].text = temp; temp = temp_opts[x].value; temp_opts[x].value = temp_opts[y].value; temp_opts[y].value = temp; } } } for(var i=0; i<box.options.length; i++) { box.options[i].value = temp_opts[i].value; box.options[i].text = temp_opts[i].text; } } </script> </head> <body> <form ACTION="" METHOD="POST"> <table> <tr> <td><select multiple size="5"> <option value="l1">A</option> <option value="l2">B </option> <option value="l3">C</option> <option value="l4">D</option> </select></td> <td> <input type="button" value="向右"><br> <input type="button" value="向左"> </td> <td><select multiple size="5"> <option value="r1">E</option> <option value="r2">F </option> <option value="r3">G</option> <option value="r4">H</option> </select></td> </tr> </table> </form> </body>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章: