js实现2个select之间内容相互移动

例如有以下2个select设置为多选,今天我们要实现的2个select之间的内容相互移动,并且是级联的移动。
<td align="center" width="35%"> <select name="menuUnUsable" multiple="multiple" size="18" style="width:240px;" id="notIsUserMenu"> </select> </td> <td align="center" width="35%"> <select name="menuUsable" multiple="multiple" size="18" style="width:240px;" id="isUserMenu"> </select> </td> //双击可用菜单时,可用菜单变成不可用菜单 $("select[name=menuUsable]").dblclick(function() { moveUseable(); }); //双击不可用的菜单时,不可用的菜单变成可用的菜单 $("select[name=menuUnUsable]").dblclick(function() { moveUnUseable(); });

当然要实现级联移动,必须对select中的内容做些处理,我的方法是:从数据库中取出需要的name_和id_字段时,对name_字段做了些处理(子对象的name_字段=父对象的name_+“-”+子对象的name_),经过这么处理页面上就很容易区分出select内容之间的父子关系。以下是js处理的select内容之间的移动并且实现了级联:

var separator = "-"; //移动不可用菜单 function moveUnUseable(){ var e1 = document.getElementById("notIsUserMenu"); var e2 = document.getElementById("isUserMenu"); var array = new Array(); for(var i=0;i<e1.options.length;i++){ //得到选中元素 if(e1.options[i].selected){ var option = e1.options[i]; //添加本身 array.push(option); //若当前元素为子菜单 if(option.text.indexOf(separator)!=-1){ //循环找出它的父菜单 for(var j=0;j<e1.options.length;j++){ var temp = e1.options[j]; if((temp.text.indexOf(separator)==-1) && (option.text.indexOf(temp.text)!=-1)){ //添加父菜单 array.push(temp); } } } } } //去除数组中的重复项 var list = array; for(var i=0;i<array.length;i++){ for(var j=i+1;j<array.length;j++) { if(array[i].value==array[j].value) { list.splice(j,1); } } } //移动选项 for(var i=0;i<list.length;i++){ e2.options.add(new Option(list[i].text,list[i].value)); e1.remove(list[i].index); } } //移动可用菜单 function moveUseable(){ var e1 = document.getElementById("isUserMenu"); var e2 = document.getElementById("notIsUserMenu"); var array = []; for(var i=0;i<e1.options.length;i++){ //得到选中元素 if(e1.options[i].selected){ var option = e1.options[i]; //若当前元素为父菜单 if(option.text.indexOf(separator)==-1){ //循环找出它的子菜单 for(var j=0;j<e1.options.length;j++){ var temp = e1.options[j]; if((temp.text.indexOf(separator)!=-1) && (temp.text.indexOf(option.text)!=-1)){ //添加子菜单 array.push(temp); } } } //添加本身 array.push(option); } } //去除数组中的重复项 var list = array; for(var i=0;i<array.length;i++){ for(var j=i+1;j<array.length;j++) { if(array[i].value==array[j].value) { list.splice(j,1); } } } //移动选项 for(var i=0;i<array.length;i++){ e2.options.add(new Option(array[i].text,array[i].value)); e1.remove(array[i].index); } }

你可能感兴趣的:(数据库,list,function,IE)