js控制 select表单子节点左右上下移动
前一段时间整理了一个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++; }}//删除已被移动的optionfor(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 ><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>