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

Js实现左右框互移

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

需求:如上图所示,左框和右框中分别有值。当点选左框中一个或多个值后,再点击中间向右箭头按钮,则选中值会从左框中消失并在右框中出现;同理点选右框值,也能移动到左侧。

思路:1、左右框分别使用select标签,框内值为option标签(便于取值),且设置multiple支持多选。

2、当点击箭头按钮时运行js函数goright(),获取所有左侧已选中option值,并在右框末尾填加,然后清除左框选中值。

实现代码:

-->

<--

问题总结

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()函数。

改动代码:

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

展开阅读全文

页面更新:2024-05-18

标签:时运   末尾   箭头   拖动   校内   新浪   点选   函数   日后   按钮   思路   元素   需求   代码   标签   财富   数码

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top