两个select左右移动、上下移动-优快云博客

本文通过一个具体的HTML页面示例介绍了如何使用JavaScript来操作HTML元素，包括元素的选择、属性的修改、事件的监听等。该示例展示了两个列表之间的元素移动、添加和删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>