这个列表选中移动呢，灵感来自淘宝，在淘宝注册店铺的过程中，会涉及到选择分类，而其选择方式呢，就是如下效果：
以下为具体的实现方式：
① HTML源码：
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" > 3 < head > 4 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> 5 6 < title > 无标题文档 </ title > 7 </ head > 8 < body > 9 < span > 10 < select id ="left" multiple ="multiple" style ="width: 80px; height:120px; background:#CCC;" > 11 < option > 1 </ option > 12 < option > 2 </ option > 13 < option > 3 </ option > 14 < option > 4 </ option > 15 < option > 5 </ option > 16 < option > 6 </ option > 17 </ select > 18 < input type ="button" value ="→" id ="forR" /> 19 < input type ="button" value ="More→" id ="MforR" /> 20 < input type ="button" value ="←" / id ="forL" > 21 < input type ="button" value ="More←" id ="MforL" /> 22 < select id ="right" multiple ="multiple" style ="width:80px; height:120px; background:#CCC;" > 23 24 </ select > 25 </ span > 26 </ body > 27 < script type ="text/javascript" src ="move.js" ></ script > 28 </ html >
网页中有六个元素：
4个按钮，两个select框
② JavaScript源码：
1 /* 获得四个按钮的节点对象 */ 2 var forR = document.getElementById( " forR " ); 3 var MforR = document.getElementById( " MforR " ); 4 var forL = document.getElementById( " forL " ); 5 var MforL = document.getElementById( " MforL " ); 6 /* 单项左向右移动 */ 7 forR.onclick = function (){ 8 // 获得两个select框元素节点 9 var left = document.getElementById( " left " ); 10 var right = document.getElementById( " right " ); 11 // 获得所有选项元素 12 var loptions = left.options; 13 // 遍历所有选项对象 14 for ( var i = 0 ;i < loptions.length;i ++ ){ 15 var op = loptions[i]; 16 // 如果选项被选中则将该元素添加到右边的选择框中、也就是移动 17 if (op.selected){ 18 right.appendChild(op); 19 break ; 20 } 21 } 22 } 23 /* 多项左向右移动 */ 24 MforR.onclick = function (){ 25 // 获得两个select框元素节点 26 var left = document.getElementById( " left " ); 27 var right = document.getElementById( " right " ); 28 // 获得所有选项元素 29 var loptions = left.options; 30 // 遍历所有选项对象 31 for ( var i = 0 ;i < loptions.length;i ++ ){ 32 var op = loptions[i]; 33 // 如果选项被选中则将该元素添加到右边的选择框中、也就是移动 34 if (op.selected){ 35 right.appendChild(op); 36 i -- ; 37 } 38 } 39 } 40 /* 单项右往左移动 */ 41 forL.onclick = function (){ 42 // 获得两个select框元素节点 43 var left = document.getElementById( " left " ); 44 var right = document.getElementById( " right " ); 45 // 获得所有选项元素 46 var roptions = right.options; 47 // 遍历所有选项对象 48 for ( var i = 0 ;i < roptions.length;i ++ ){ 49 var op = roptions[i]; 50 // 如果选项被选中则将该元素添加到右边的选择框中、也就是移动 51 if (op.selected){ 52 left.appendChild(op); 53 break ; 54 } 55 } 56 } 57 /* 多向右往左移动 */ 58 MforL.onclick = function (){ 59 // 获得两个select框元素节点 60 var left = document.getElementById( " left " ); 61 var right = document.getElementById( " right " ); 62 // 获得所有选项元素 63 var roptions = right.options; 64 // 遍历所有选项对象 65 for ( var i = 0 ;i < roptions.length;i ++ ){ 66 var op = roptions[i]; 67 // 如果选项被选中则将该元素添加到右边的选择框中、也就是移动 68 if (op.selected){ 69 left.appendChild(op); 70 i -- ; 71 } 72 } 73 }
注意：
1.在以上的脚本代码中我们可以看到当单个元素移动时利用break结束了循环，这是为了保证每次即使多选也只移动一个元素，循环也就只执行一次
2.在多个选中项的移动中，当检测到选中元素并移走后select中元素减少，而检测元素的下标就会从移走的后的下标直接往后移动检测，
如果不进行减操作会导致每次都遗留一个元素，这并不符合我们的理想效果
从反向的移动中我们可以看到选项不会像以前正常排序，希望如果有想法的老牛们给些提示，希望大家在本文中可以学到写东西，共同交流。
本文版权所有，转载请注明出处！