两个select左右移动、上下移动

ゞ浴缸里的玫瑰 2022-04-14 05:47 263阅读 0赞

<!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">  
<html>  
<head>  
<title>移动</title>  
<script type="text/javascript" >  
  
function Add() \{  
allRoles = document.getElementById("colname1");//第一个select  
selectRoles = document.getElementById("colname2");//第二个select  
  
for(var i =0;i<allRoles.options.length;i++)\{  
if(allRoles.options\[i\].selected==true)\{  
var ifExit = false;  
for(var n =0;n<selectRoles.options.length;n++)\{  
if(selectRoles.options\[n\].value == allRoles.options\[i\].value)\{  
ifExit = true;  
\}  
\}  
if(ifExit == false)\{  
selectRoles.options.add(new Option(allRoles.options\[i\].text,allRoles.options\[i\].value));  
\}else\{  
alert(yicunzai);  
\}  
allRoles.remove(i);  
i--;  
\}  
\}  
\}  
  
function Remove() \{  
allRoles = document.getElementById("colname1");  
selectRoles = document.getElementById("colname2");  
for(var i =0;i<selectRoles.options.length;i++)\{  
if(selectRoles.options\[i\].selected==true)\{  
allRoles.options.add( new Option(selectRoles.options\[i\].text,selectRoles.options\[i\].value));  
selectRoles.remove(i);  
i--;  
\}  
\}  
  
\}  
  
  
function upcol() \{  
  
var rightcol = document.getElementById("colname2");  
var selectflag=0;  
  
for(var i =0;i<rightcol.options.length;i++)\{  
  
if(rightcol.options\[i\].selected==true && i!=0)\{  
  
var temptext=rightcol.options\[i\].text;  
var tempvalue=rightcol.options\[i\].value;  
  
rightcol.options\[i\].value=rightcol.options\[i-1\].value;  
rightcol.options\[i\].text=rightcol.options\[i-1\].text;  
rightcol.options\[i-1\].value=tempvalue;  
rightcol.options\[i-1\].text=temptext;  
  
selectflag=i-1;  
break; //这个标志表明目前只能一次移一行，不支持多选  
\}  
\}  
  
for(var i =0;i<rightcol.options.length;i++)\{  
rightcol.options\[i\].selected=false;  
\}  
  
rightcol.options\[selectflag\].selected=true;  
  
\}  
  
function downcol() \{  
  
var rightcol = document.getElementById("colname2");  
var selectflag=0;  
  
for(var i=0;i<rightcol.options.length;i++)\{  
  
if(rightcol.options\[i\].selected==true && i!=rightcol.options.length-1)\{  
  
var temptext=rightcol.options\[i\].text;  
var tempvalue=rightcol.options\[i\].value;  
  
rightcol.options\[i\].value=rightcol.options\[i+1\].value;  
rightcol.options\[i\].text=rightcol.options\[i+1\].text;  
rightcol.options\[i+1\].value=tempvalue;  
rightcol.options\[i+1\].text=temptext;  
  
selectflag=i+1;  
break; //这个标志表明目前只能一次移一行，不支持多选  
\}  
\}  
  
if(selectflag!=0)\{ //如果此标志为0，说明光标已经移到最下边，没有发生向下交换的行动  
for(var i =0;i<rightcol.options.length;i++)\{  
rightcol.options\[i\].selected=false;  
\}  
  
rightcol.options\[selectflag\].selected=true;  
\}  
\}  
</script>  
</head>  
  
<body>  
<FORM id="Form1" name="Form1" method="POST" >  
  
<br>  
<table border="0" width="100%" cellspacing="0" cellpadding="0">  
<tr>  
<td width="100%">  
<table border="0" width="100%" cellspacing="3" cellpadding="0">  
<tr height=10>  
<TD width="1%"></TD>  
<TD width="30%" align="left" width="15">字段一列表</TD>  
<td width="16%" >  
<TD width="34%" align="left" width="15">字段二列表</TD>  
<td width="19%">  
</tr>  
  
<tr>  
<td width="1%"></td>  
<td width="84%" colspan="4">  
<table border="0" width="100%" cellspacing="0" cellpadding="0">  
<tr>  
<td width="30%" rowspan="4">  
  
<select size="15" name="colname1" multiple style="width:200px" id="colname1" οndblclick="JavaScript:Add('colname1','colname2','colname')">  
<option value="stationRun" >字段一</option>  
</select>  
</td>  
<td width="15%"></td>  
<td width="35%" rowspan="4" id="colnameDiv">  
  
  
<select size="15" name="colname2" id="colname2" multiple style="width:200px" οndblclick="JavaScript:Remove('colname1','colname2','colname')">  
<option value="devRun" >字段二</option>  
<option value="createDate" >字段三</option>  
</select>  
</td>  
  
<td width="20%"></td>  
</tr>  
  
<tr>  
<td width="90" align="center">  
<input name="DoAddb" type="button" value=">>" onClick="JavaScript:Add()" class=btn\_mouseout οnmοuseοver="this.className='btn\_mouseover'" οnmοuseοut="this.className='btn\_mouseout'" style="width: 30px; font-size:12px; color:black; height=22">  
</td>  
<td width="120" align="center">  
<input name="doup" type="button" value="向上" onClick="upcol()" class=btn\_mouseout οnmοuseοver="this.className='btn\_mouseover'" οnmοuseοut="this.className='btn\_mouseout'" style="width: 50px; font-size:12px; color:black; height=22">  
</td>  
</tr>  
<tr>  
<td width="90" align="center">  
<input name="DoDelb" type="button" value="<<" onClick="JavaScript:Remove()" class=btn\_mouseout οnmοuseοver="this.className='btn\_mouseover'" οnmοuseοut="this.className='btn\_mouseout'" style="width: 30px; font-size:12px; color:black; height=22">  
</td>  
<td width="120" align="center">  
<input name="dodown" type="button" value="向下" onClick="downcol()" class=btn\_mouseout οnmοuseοver="this.className='btn\_mouseover'" οnmοuseοut="this.className='btn\_mouseout'" style="width: 50px; font-size:12px; color:black; height=22">  
</td>  
</tr>  
</table>  
</td>  
</tr>  
</table>  
</td>  
</tr>  
</table>  
</FORM>  
</body>  
</html>