<!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>select的options对换</title>
<script language="javascript">
function chaSel(bol){
var srcSel = document.getElementById("src");
var desSel = document.getElementById("des");
if (bol) {
for(var i=0;i<srcSel.length;i++){
if(srcSel.options[i].selected){
desSel.options[desSel.length]=new Option(srcSel.options[i].text, srcSel.options[i].value);
srcSel.options[i]=null;
i--;
}
}
} else {
for(var i=0;i<desSel.length;i++){
if(desSel.options[i].selected){
srcSel.options[srcSel.length]=new Option(desSel.options[i].text, desSel.options[i].value);
desSel.options[i]=null;
i--;
}
}
}
}
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:49px;
top:79px;
width:81px;
height:137px;
z-index:1;
}
#Layer2 {
position:absolute;
left:216px;
top:82px;
width:88px;
height:137px;
z-index:2;
}
#Layer3 {
position:absolute;
left:156px;
top:92px;
width:37px;
height:24px;
z-index:3;
}
#Layer4 {
position:absolute;
left:155px;
top:165px;
width:35px;
height:22px;
z-index:4;
}
-->
</style>
</head>
<body>
<div id="Layer1">
<select id="src" multiple="multiple" size="10">
<option value="1">list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
<option value="6">list6</option>
<option value="7">list7</option>
<option value="8">list8</option>
<option value="9">list9</option>
<option value="10">list10</option>
</select>
</div>
<div id="Layer2">
<select id="des" multiple="multiple" size="10">
</select>
</div>
<div id="Layer3">
<input name="button" type="button" value=">>" onclick="chaSel(true);" />
</div>
<div id="Layer4">
<input name="button2" type="button" value="<<" onclick="chaSel(false);" />
</div>
</body>
</html>
javascrip实现列表框数据对换；可以多复选。
用select控件的选项修改（option）。
例题如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
