基于javascript实现单选及多选的向右和向左移动实例

时间：2021-05-25

本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下：

方法 一：

<body><h1>实现单选及多选的向右和向左移动</h1><div id="lst"> <span> <select id="lselect" size="10" multiple="multiple" style="width: 100px; background-color:blue;"> <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 style="width: 200px;height: 100px;"> <input type="button" value="单个向右移动" onclick="oneRMove()" /> <input type="button" value="多个向右移动" onclick="moveRMove()" /> <input type="button" value="单个向左移动" onclick="oneLMove()" /> <input type="button" value="多个向左移动" onclick="moveLMove()" /> </span> <span> <select id="rselect" size="10" style="width: 100px;background-color: yellow;" 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对象中的所有optionvar 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 border="0"><tr><td><select multiple size="5" name="list1"><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="向右" onclick="move(this.form.list1,this.form.list2)" name="B1"><br><input type="button" value="向左" onclick="move(this.form.list2,this.form.list1)" name="B2"></td><td><select multiple size="5" name="list2"><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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章