JS实现数据交换（解决交换多值时残留值的有关问题）
日期：2014-05-16 浏览次数：20494 次
JS实现数据交换（解决交换多值时残留值的问题）
???? ?在用js写两个下拉列表交换值的时候，让我们着实郁闷的就是，当我们在选中多个值进行交换时,会有部分值残留在另一侧的下拉列表里，当我们一个一个交换时就没有事情。为什么会出现这样的问题呢 是因为当我们在remove掉一个字节点的时候，其中的每个节点的index都发生了变化就是说每一个都变成了原先的index-1（除非你交换的不是第一个第一个还是原先的0），那要实现全部交换的效果我们应该怎么办呢？
图解代码如下：
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jiaohuan.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
#div1{
border-style:ridge ridge;
width: 60px;
height: auto;
}
#div3{
border-style:ridge ridge;
width: 70px;
height: auto;
}
</style>
</head>
<body>
<div id="div4" align="center">
<div id="div1" style="float: left">
<select size="10" id="sel" multiple="multiple">
<option>
选项1
</option>
<option>
选项2
</option>
<option>
选项3
</option>
<option>
选项4
</option>
<option>
选项5
</option>
<option>
选项6
</option>
<option>
选项7
</option>
</select>
</div>
<div id="div2" style="float:left">
<input type="button" value="-->" onclick="xi()" />
<input type="button" value="《==" onclick="hui()" />
</div>
<div id="div3">
<select size="10" id="sel2" style="width: 70px" multiple="multiple">
</select>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//这里我把单个移动和多值交换写在一个方法里了，可以拆开写
function xi(){
var sel=document.getElementById("sel");
for(var i=0;i<sel.options.length;i++){
if(sel.options[i].selected){
var chang=sel.options[i].innerHTML;
var sel2=document.getElementById("sel2");
var op=document.createElement("option");
op.appendChild(document.createTextNode(chang));
sel2.appendChild(op);
sel.removeChild(sel.options[i]);
i=i-1;//因为当我们在进行remove是index变换了，所以让他从0在开始遍历
}
}
}function hui(){
var sel=document.getElementById("sel2");
for(var i=0;i<sel.options.length;i++){
if(sel.options[i].selected){
var chang=sel.options[i].innerHTML;
var sel1=document.getElementById("sel");
var op=document.createElement("option");
sel.removeChild(sel.options[i]);
op.appendChild(document.createTextNode(chang));
sel1.appendChild(op);
i=i-1;//因为当我们在进行remove是index变换了，所以让他从0在开始遍历
}
}
}
</script>
?简化算法 直接交换对象
function xi1(){
var sel=document.getElementById("sel");
for(var i=0;i<sel.options.length;i++){
if(sel.options[i].selected){
sel2.appendChild(sel.options[i]);
i--;
}
}
}
function hui1(){
var sel1=document.getElementById("sel");
var sel=document.getElementById("sel2");
for(var i=0;i<sel.options.length;i++){
if(sel.options[i].selected){
sel1.appendChild(sel.options[i]);
i=i-1;
}
}
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
