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

独二无一1102

浏览: 17404 次
性别:
来自: 青岛

最近访客更多访客>>

116856645

woodding2008

qq_19671173

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript 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">
<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" ondblclick="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" ondblclick="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 onmouseover="this.className='btn_mouseover'" onmouseout="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 onmouseover="this.className='btn_mouseover'" onmouseout="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 onmouseover="this.className='btn_mouseover'" onmouseout="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 onmouseover="this.className='btn_mouseover'" onmouseout="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>

分享到：

case when | OGNL

2013-08-29 16:16
浏览 505
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论