实用的左右列表框内容互换联动特效，还可以在列表框内动态添加选项内容，用鼠标点击箭头按钮来切换即可。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>左右列表内容互换联动效果_武鸣人</title>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<form name="frm">
<select id="leftSel" name="s1" size="10" multiple style="width:100%" onchange="redirec(document.frm.s1.options.selectedIndex)">
<option value="0">辽宁</option>
<option value="0">黑龙江</option>
<option value="0">吉林</option>
<option value="0">河北</option>
</select>
</form>
</td>
<td width="50" valign="middle">
<p style="width:100%" align="center"><input type="button" value="添加" onclick="addPro()"></p>
<p style="width:100%" align="center"><input type="button" value=">>" onclick="moveRight()"></p>
<p style="width:100%" align="center"><input type="button" value="<<" onclick="moveLeft()"></p>
<p style="width:100%" align="center"><input type="button" value="全部右移" onclick="moveAllright()"></p>
<p style="width:100%" align="center"><input type="button" value="全部左椅" onclick="moveAllleft()"></p>
<p style="width:100%" align="center"><input type="button" value="删除" onclick="removeSel()"></p>
<p style="width:100%" align="center"><input type="button" value="删除全部" onclick="delAll()"></p>
</td>
<td width="150">
<select id="rightSel" size="10" multiple style="width:100% "></select>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
<td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">
<input type="button" value="提交">
</td>
</tr>
</table>
<script>
var Z = function(id){
if (document.getElementById(id)){
return document.getElementById(id)
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
else{
alert("not found object");
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
}
var leftSel = Z("leftSel");
var rightSel = Z("rightSel");
function removeSel(){
if(leftSel.selectedIndex > -1){
for(i=0;i<leftSel.options.length;i++){
if(leftSel.options[i].selected){
leftSel.remove(i);
i = i - 1;
}
}
}
if(rightSel.selectedIndex > -1){
for(i=0;i<rightSel.options.length;i++){
if(rightSel.options[i].selected){
rightSel.remove(i);
i = i - 1;
}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function removeAll(){
for(i=0;i<leftSel.options.length||i<rightSel.options.length;i++){
leftSel.remove(i)||rightSel.remove(i);
i = i - 1;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function delAll(){
for(i=0;i<leftSel.options.length||i<rightSel.options.length;i++){
leftSel.remove(i)||rightSel.remove(i);
i = i - 1;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function moveRight(){
for(i=0;i<leftSel.options.length;i++){
if(leftSel.options[i].selected){
rightSel.appendChild(leftSel.options[i]);
i = i - 1;
}
}
}
function moveLeft(){
for(i=0;i<rightSel.options.length;i++){
if(rightSel.options[i].selected){
leftSel.appendChild(rightSel.options[i]);
i = i - 1;
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function moveAllright(){
for(i=0;i<leftSel.options.length;i++){
rightSel.appendChild(leftSel.options[i]);
i = -1;
}
}
function moveAllleft(){
for(i=0;i<rightSel.options.length;i++){
leftSel.appendChild(rightSel.options[i]);
i = -1;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function addPro(){
var name = prompt();
if(name == null || name ==""){
alert("内容不能为空");
}
else{
var opt = document.createElement("option");
leftSel.appendChild(opt);
opt.innerHTML = name;
}
}
//联动
var leftLen = leftSel.options.length;
var s2 = new Array(leftLen);
for(i=0;i<leftLen;i++){
s2[i] = new Array();
}
s2[0][0] = new Option("厦门","");
s2[0][1] = new Option("福州","");
s2[0][2] = new Option("南平","");
s2[1][0] = new Option("龙岩","");
s2[1][1] = new Option("宁德","");
s2[1][2] = new Option("泉州","");
s2[2][0] = new Option("龙岩1","");
s2[2][1] = new Option("宁德2","");
s2[2][2] = new Option("泉州3","");
s2[3][0] = new Option("龙岩4","");
s2[3][1] = new Option("宁德5","");
s2[3][2] = new Option("泉州6","");
function redirec(x){
for(i=0;i<s2[x].length;i++)
{
rightSel.options[i] = new Option(s2[x][i].text,s2[x][i].value);
}
rightSel.options[0].selected = true;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处