JS实现数据交换（解决交换多值时残留值的问题）

最新推荐文章于 2023-07-04 11:30:00 发布

Longmanfei

最新推荐文章于 2023-07-04 11:30:00 发布

阅读量190

点赞数

分类专栏： web前端文章标签： CSS JavaScript HTML ViewUI

web前端专栏收录该内容

11 篇文章

订阅专栏

在用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="-->" οnclick="xi()" />

				<input type="button" value="《==" οnclick="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;
       }
   }
}