原生JS实现左右框元素互移

百度

新浪

360

开心网

校内网

58同城

赶集

财富

-->

<--

问题总结：

1，通过给goright()传值1和-1来判断是左移还是右移实现了简单通用，但是同一页面有更多表单则不能实现。

2，选择多项移动会发现只有半数值实现了移动，说明代码存在bug.

分析：

1，为了实现更加的通用性，需要传送三个值，表单名称，左框名称，右框名称。但是传参为字符串，而取值为dom，所以要用到eval();

2,在上面的例子出现bug,是因为首先获取选取数量，然后根据下标依次移动，但是移动一次后总数量发生了变化，相对下标也发生了变化。第二次移动下标为1的值其实是移动的第三个选取值。因此for循环由i++改为i--;采用倒序移动。

改动代码如下：

functiongoright(f,i,j){

var left=eval(f+"."+i);

var right=eval(f+"."+j);

var text='';

for( var k=left.options.length-1;k>=0;k--){

if(left.options[k].selected){

new_option=new Option(left.options[k].text,left.options[k].value);

right.options[right.options.length]=new_option;

left.options[k]=null;

}

}

}

需求2：双击左框内值，则会移动到右侧；同理双击右框内值则会移动到左侧；

思路：在select标签内加入ondblclick="goright()”;双击执行goright()函数。

改动代码：

。。。。。

拓展需求：使用鼠标左键拖动实现多选，本人在网上找了很多，一直没有实现。日后找到方法再贴出。