js控制 select表单子节点左右上下移动 -

dong717

浏览: 102738 次
性别:
来自: 西安

最近访客更多访客>>

_性本善

laowangwww

a1002323289

q821104180

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js控制 select表单子节点左右上下移动

博客分类：

javascript

J#XHTML HTML

前一段时间整理了一个js,主要是用来操作两个select表单的option节点相互移动，及置顶置地向上向下移动
1.js代码

/**
 * @功能 select左右移动实现js
 * @作者 md_java
 * @时间 2010-6-20 
 */

var fromsob,toobj,froms,arry,nowIndex,newoption;
/**
 * @功能 分批添加或删除
 * @输入  formselect 要移动的select;toselect 要移给的select,postionstr 移动指向left OR right
 * @返回 无
 */
function  moveoption(formselect,toselect,postionstr){
 fromsobj=document.getElementById(formselect);
 toobj=document.getElementById(toselect);
if(postionstr=='left'&&fromsobj.options.length==0){//判断是否还有权限
 alert('left is empty');
 return;
}else if(postionstr=='right'&&fromsobj.options.length==0){//判断是否还有权限
 alert('right is empty');
 return;
}

if(postionstr=='left'&&fromsobj.options.selectedIndex==-1){//判断是否选中
alert('please choose left');
return;
}else if(postionstr=='right'&&fromsobj.options.selectedIndex==-1){//判断是否选中
alert('please choose right');
return;
}
froms=fromsobj.options;//获得要移动select的opations
 arry=new Array();
var arr=0;
for(var i=0;i<froms.length;i++){
 if(froms[i].selected==true){
     nowIndex   = toobj.options.length;            //获取将要移动到toselect的options长度   
     newoption = new Option(froms[i].text, froms[i].value,false,false);//copy option
     toobj.options[nowIndex] = newoption;
	 fromsobj
	 arry[arr]=froms[i];//将选中对象缓存如数组 等下删除
	 arr++;
	
 }
}
//删除已被移动的option
for(var a=0;a<arry.length;a++){
   fromsobj.options[arry[a].index]=null;
  }
}


/**
 * @功能 整体移动option全部添加或全部删除
 * @输入  formselect 要移动的select;toselect 要移给的select,postionstr 移动指向left OR right
 * @返回 无
 */
function giveOrUndoAll(formselect,toselect,postionstr){
fromsobj=document.getElementById(formselect);
 toobj=document.getElementById(toselect);
if(postionstr=='left'&&fromsobj.options.length==0){
 alert('left is empty');
 return;
}
if(postionstr=='right'&&fromsobj.options.length==0){
 alert('right is empty');
 return;
}

 froms=fromsobj.options;
for(var i=0;i<froms.length;i++){
      nowIndex   = toobj.options.length;              
     newoption = new Option(froms[i].text, froms[i].value,false,false);
     toobj.options[nowIndex] = newoption;
     }
  fromsobj.innerHTML=null;


}
/**单元素向底部移动*/
function mTop(sid){   
	selectRight=document.getElementById(sid);
    var i = selectRight.options.selectedIndex;
    if(i > 0){   
        Temp_Text=selectRight.options(i).text;   
        Temp_ID=selectRight.options(i).value;   
        for(j=i;j>0;j--){   
            selectRight.options(j).text=selectRight.options(j-1).text;   
            selectRight.options(j).value=selectRight.options(j-1).value;   
        }   
        selectRight.options(0).value=Temp_ID;   
        selectRight.options(0).text=Temp_Text;       
        selectRight.selectedIndex=0;   
    }   
}   
 /**单元素向上移动*/
function  mUp(sid){   
	selectRight=document.getElementById(sid);
    var i = selectRight.options.selectedIndex;   
    var j = i-1   
    if(i>0){   
        Temp_Text = selectRight.options(j).text;   
        Temp_ID = selectRight.options(j).value;   
    
        selectRight.options(j).text = selectRight.options(i).text;   
        selectRight.options(j).value = selectRight.options(i).value;   
    
        selectRight.options(i).text = Temp_Text;   
        selectRight.options(i).value = Temp_ID;   
    
        selectRight.selectedIndex=j;   
    }   
}   
    /**单元素向下移动*/
function  mDown(sid){   
	selectRight=document.getElementById(sid);
    var i = selectRight.options.selectedIndex;
    if (i != selectRight.length-1){   
        var j = i+1;   
        if(i < selectRight.length){   
            Temp_Text = selectRight.options(j).text;   
            Temp_ID = selectRight.options(j).value;   
    
            selectRight.options(j).text = selectRight.options(i).text;   
            selectRight.options(j).value = selectRight.options(i).value;   
    
            selectRight.options(i).text = Temp_Text;   
            selectRight.options(i).value = Temp_ID;   
    
            selectRight.selectedIndex=j;   
        }   
    }   
}   
    /**单元素向底部移动*/
function  mBottom(sid){   
	selectRight=document.getElementById(sid);
    var i = selectRight.selectedIndex;   
    var j = selectRight.length-1   
    if(i < j){   
        Temp_Text = selectRight.options(i).text;   
        Temp_ID = selectRight.options(i).value;   
        for(var k=i+1;k<=j;k++){   
            selectRight.options(k-1).text=selectRight.options(k).text;   
            selectRight.options(k-1).value=selectRight.options(k).value;   
        }   
    
        selectRight.options(j).text=Temp_Text;   
        selectRight.options(j).value=Temp_ID;   
    
        selectRight.selectedIndex=j;   
    }   
}

2.html代码

<!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=utf-8" />
		<title>MOVE SELECT</title>
		<script type="text/javascript" src="opationSelect.js"></script>

		<style type="text/css">
<!--
.STYLE3 {
	font-size: 14px;
	font-weight: bold;
}
li{text-align:center}
input{text-align:center;width:80px}
-->
</style>
		<script type="text/javascript">
function checkSub(){
   var Vs=document.getElementById("rselect").options;
   var str="you want move:\n";
	for(var i=0;i<Vs.length;i++){
		Vs[i].selected=true;
        str=str+"\n"+Vs[i].text;
		}
	alert(str);
	return false;
}
</script>
	</head>

	<body>
				<form action="" method="post" id="form1">
				<table width="100%" border="1" align="center" cellpadding="0"
					cellspacing="0">
					<tr>
						<td height="18" colspan="2" align="center"
							style="padding-bottom: 20px">
							<span class="STYLE3">MOVE SELECT</span>
						</td>
					</tr>
					<tr>

						<td height="35" >
							<table border="1" cellpadding="0" align="center" cellspacing="0" >
								<tr align="center">
									<th>
										left
									</th>
									<th>
										MOVE
									</th>
									<th>
										right
									</th>
								</tr>
								<tr>
									<td> 
										<select multiple="multiple"
											style="height: 200px; width: 120px" id="lselect">
											<option value="1">
												opation1
											</option>
											<option value="2">
												opation2
											</option>
											<option value="3">
												opation3
											</option>
											<option value="4">
												opation4
											</option>
											<option value="5">
												opation5
											</option>
											<option value="6">
												opation6
											</option>
										</select>
									</td>
									<td align="left">
									<ul style="list-style:none;margin:0px; padding:0px;">
									    <li><input type="button" value="toTop" onclick="mTop('rselect');" /></li>
										<li><input type="button" value="toUp" onclick="mUp('rselect');" /></li>
										<li><input type="button" value="toLeftAll" onclick="giveOrUndoAll('lselect','rselect','left');" />
										</li>
										<li><input type="button" value="toLeft" onclick="moveoption('lselect','rselect','left');" />
										</li>
										<li><input type="button" value="toRight" onclick="moveoption('rselect','lselect','right');" /></li>
										<li><input type="button" value="toRightAll" onclick="giveOrUndoAll('rselect','lselect','right');" /></li>
										<li><input type="button" value="toDown" onclick="mDown('rselect');" /></li>
										<li><input type="button" value="toButtom" onclick="mBottom('rselect');" /></li>
										</ul>
									</td>
									<td>
										<select multiple="multiple"
											style="height: 200px; width: 120px" id="rselect">

										</select>

									</td>
								</tr>
							</table>
						</td>
					</tr>

					<tr>

						<td height="35" align="center">
							<input value="submit" type="button" onclick="checkSub();" />
							</td>
					</tr>
				</table>
			</form>
		
	</body>
</html>

opationSelect.rar (1.3 KB)
下载次数: 145

分享到：

xmlhttp.status == 0& xmlhttp.status == 2 ... | Dialect does not support identity key ge ...

2010-07-21 14:53
浏览 3587
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js控制 select表单子节点左右上下移动

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js控制 select表单子节点左右上下移动

评论

发表评论

相关推荐

jquery上传图片预览

FusionCharts参数的详细说明和功能特性

最近访客更多访客>>