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; } }}?