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

这篇文章主要介绍了基于javascript实现单选及多选的向右和向左移动,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

方法 一：

1. <body> 
2. <h1>实现单选及多选的向右和向左移动</h1> 
3. <div id="lst"> 
4. <span> 
5. <select id="lselect" size="10" multiple="multiple" style="width: 100px; background-color:blue;"> 
6. <option>选项1</option> 
7. <option>选项2</option> 
8. <option>选项3</option> 
9. <option>选项4</option> 
10. <option>选项5</option> 
11. <option>选项6</option> 
12. <option>选项7</option> 
13. <option>选项8</option> 
14. <option>选项9</option> 
15. <option>选项10</option> 
16. </select> 
17. <span style="width: 200px;height: 100px;"> 
18. <input type="button" value="单个向右移动" onclick="oneRMove()" /> 
19. <input type="button" value="多个向右移动" onclick="moveRMove()" /> 
20. <input type="button" value="单个向左移动" onclick="oneLMove()" /> 
21. <input type="button" value="多个向左移动" onclick="moveLMove()" /> 
22. </span> 
23. <span> 
24. <select id="rselect" size="10" style="width: 100px;background-color: yellow;" multiple="multiple"> 
25. </select> 
26. </span> 
27. </span> 
28. </div>  
29. </body> 
30. <script type="text/javascript"> 
31. window.onload = function(){} 
32. //获取select对象 
33. var lselect=document.getElementById("lselect"); 
34. var rselect=document.getElementById("rselect"); 
35. //获取lselect和roptions对象中的所有option 
36. var loptions=lselect.options; 
37. var roptions=rselect.options; 
38. function oneRMove(){ 
39. for(var i=0;i<loptions.length;i++){ 
40. var op=loptions[i]; 
41. if(op.selected){ 
42. rselect.appendChild(op); 
43. break; 
44. } 
45. } 
46. } 
47. function moveRMove(){ 
48. for(var i=0;i<loptions.length;i++){ 
49. var op=loptions[i]; 
50. if(op.selected){ 
51. rselect.appendChild(op); 
52. i--; 
53. } 
54. } 
55. } 
56. function oneLMove(){ 
57. for(var i=0;i<roptions.length;i++){ 
58. var op=roptions[i]; 
59. if(op.selected){ 
60. lselect.appendChild(op); 
61. break; 
62. } 
63. } 
64. } 
65. function moveLMove(){ 
66. for(var i=0;i<roptions.length;i++){ 
67. var op=roptions[i]; 
68. if(op.selected){ 
69. lselect.appendChild(op); 
70. i--; 
71. } 
72. } 
73. } 
74. </script> 

方法 二：

1. <script type="text/javascript"> 
2. sortitems = 1; 
3. function move(fbox,tbox) { 
4. for(var i=0; i<fbox.options.length; i++) { 
5. if(fbox.options[i].selected && fbox.options[i].value != "") { 
6. var no = new Option(); 
7. no.value = fbox.options[i].value; 
8. no.text = fbox.options[i].text; 
9. tbox.options[tbox.options.length] = no; 
10. fbox.options[i].value = ""; 
11. fbox.options[i].text = ""; 
12. } 
13. } 
14. BumpUp(fbox); 
15. if (sortitems) SortD(tbox); 
16. } 
17. function BumpUp(box) { 
18. for(var i=0; i<box.options.length; i++) { 
19. if(box.options[i].value == "") { 
20. for(var j=i; j<box.options.length-1; j++) { 
21. box.options[j].value = box.options[j+1].value; 
22. box.options[j].text = box.options[j+1].text; 
23. } 
24. var ln = i;break; 
25. } 
26. } 
27. if(ln < box.options.length) { 
28. box.options.length -= 1; 
29. BumpUp(box); 
30. } 
31. } 
32. function SortD(box) { 
33. var temp_opts = new Array();  
34. var temp = new Object();  
35. for(var i=0; i<box.options.length; i++) {  
36. temp_opts[i] = box.options[i]; 
37. } 
38. for(var x=0; x<temp_opts.length-1; x++) { 
39. for(var y=(x+1); y<temp_opts.length; y++) { 
40. if(temp_opts[x].text > temp_opts[y].text) { 
41. temp = temp_opts[x].text; 
42. temp_opts[x].text = temp_opts[y].text; 
43. temp_opts[y].text = temp; 
44. temp = temp_opts[x].value; 
45. temp_opts[x].value = temp_opts[y].value; 
46. temp_opts[y].value = temp; 
47. } 
48. } 
49. } 
50. for(var i=0; i<box.options.length; i++) { 
51. box.options[i].value = temp_opts[i].value; 
52. box.options[i].text = temp_opts[i].text; 
53. } 
54. } 
55. </script> 
56. </head> 
57. <body> 
58. <form ACTION="" METHOD="POST"> 
59. <table border="0"> 
60. <tr> 
61. <td><select multiple size="5" name="list1"> 
62. <option value="l1">A</option> 
63. <option value="l2">B </option> 
64. <option value="l3">C</option> 
65. <option value="l4">D</option> 
66. </select></td> 
67. <td> 
68. <input type="button" value="向右" onclick="move(this.form.list1,this.form.list2)" name="B1"><br> 
69. <input type="button" value="向左" onclick="move(this.form.list2,this.form.list1)" name="B2"> 
70. </td> 
71. <td><select multiple size="5" name="list2"> 
72. <option value="r1">E</option> 
73. <option value="r2">F </option> 
74. <option value="r3">G</option> 
75. <option value="r4">H</option> 
76. </select></td> 
77. </tr> 
78. </table> 
79. </form> 
80. </body> 

希望本文所述对大家的javascript程序设计有所帮助。