`

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

    博客分类:
  • java
J# 
阅读更多
例如有以下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);
   }
  }
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics