添加，移动，删除,排序多选框

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
/*
@Author:sky
@date:2008/4/18,由于项目需要就写了一个
*/
var $=function(d){return document.getElementById(d);}

//添加函数说明d为源select的id,t为目的地的select的id
function aa(d,t){
for(var i=0;i<$(d).options.length;i++){
if($(d).options[i].selected==true){
addoption($(d).options[i].text,$(d).options[i].value,t);
}
}

}

function addoption(t,v,s){
var s=s||"select2";
var op=document.createElement("option");
//op.innerText=t;
op.appendChild(document.createTextNode(t));
op.value=v;
$(s).appendChild(op);
}

function opdel(a){
//删除选中的options
var obj=$(a);
  for (var i=obj.length-1;i>=0;i--){
    if (obj.options[i].selected)
    {
      //obj.options.remove(i);
	  obj.options[i]=null;
	  
    }
  }

}

//全选
function sel(d){
for(var i=0;i<$(d).length;i++){
$(d).options[i].selected=true;

}
}

//上移
function shang(a){
var obj2=$(a);
var p="",n="";

if(obj2.options.selectedIndex>0){//判断是否为第一个那么就不能上移了
  for(var i=0;i<obj2.length;i++){
    if(obj2.options[i].selected)
    {
       p=obj2.options[i];
	   n=obj2.options[i-1];
	   obj2.insertBefore(p,n);
    }
  }
    }
}

//下移
function next(a){
var obj2=$(a);
var p="",n="";

if(obj2.options.selectedIndex!=obj2.length-1){//判断是否为最后一个那么就不能下移了
  for(var i=0;i<obj2.length;i++){
    if(obj2.options[i].selected)
    {
       p=obj2.options[i];
	   n=obj2.options[i+1];
	   obj2.insertBefore(n,p);return;
    }
  }
    }
}

//移动l左移动到r右
function moveall(l,r){
var obj2=$(l);
var obj3=$(r);

for(var i=0;i<obj2.length;i++){

if(obj2.options[i].selected){
	var s=obj2.options.selectedIndex;
	var oo=obj2.options;
	addoption(oo[i].text,oo[i].value,r);
	//obj2.options.remove(s);
	}
}

for (var i=obj2.length-1;i>=0;i--){

if(obj2.options[i].selected){

obj2.options[i]=null;
}
}
}

</script>
</head>
<body>
左框双击实现添加到右边没有过滤重复项    右框双击对像实现删除
<form id="form1" name="form1" method="post" action="">
  <select name="select" size="10" multiple="MULTIPLE" id="cd" ondblclick="aa(this.id)">
    <option value="aa">aa</option>
    <option value="bb">bb</option>
    <option value="cc">cc</option>
	<option value="dd">dd</option>
	<option value="ee">ee</option>
	<option value="ff">ff</option>
  </select>
  -->
  <select name="select2" size="10" multiple="multiple" id="select2" style="" ondblclick="opdel(this.id)">
  </select>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td width="8%" height="25"><input type="button" name="button32" value="全选左框" onclick="sel('cd')" /></td>
    <td width="11%"><input type="button" name="button1" value="增加到右框" onclick="aa('cd')" /></td>
    <td width="14%"><input type="button" name="buttonmoveall" value="左边移动到右边要选中" onclick="moveall('cd','select2')" /></td>
    <td width="9%"></td>
    <td width="9%"></td>
    <td width="49%"><input type="button" name="button2" value="删除选中右边" onclick="opdel('select2')" /></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td width="10%" height="25"><input type="button" name="button3" value="全选右框" onclick="sel('select2')" /></td>
    <td width="17%"><input type="button" name="rmoveall" value="右边移动全部到左边要选中" onclick="moveall('select2','cd')" /></td>
    <td width="9%"></td>
    <td width="6%"><input type="button" name="button5" value="上移" onclick="shang('select2')" /></td>
    <td width="58%"><input type="button" name="button6" value="下移" onclick="next('select2')" /></td>
  </tr>
</table>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

添加，移动，删除,排序多选框

相关文章

精彩推荐