在用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;
}
}
}
- 大小: 14.2 KB
- 大小: 14.4 KB
分享到:
相关推荐
在FineReport报表工具中,用户经常需要通过按钮来处理页面上的值,如进行数据填报或值的计算。...在编程实现时,关键在于理解FineReport数据刷新机制的细节,并合理运用JavaScript API来辅助实现数据的即时读取。
在编程实现时,可以使用各种语言,例如 Python、Java、C++ 或 JavaScript。以下是使用 Python 的简单示例: ```python def swap_min_max(arr): min_val = float('inf') max_val = float('-inf') min_idx, max_...
它提供了安全的数据传输机制,确保在不同的组织或部门之间共享数据时,数据的完整性和隐私得到保护。源码中可能会有相关的API接口定义、数据加密和解密算法,以及权限控制的实现,这些都是保证数据交换安全的重要...
11. **数据库复制**:如MySQL的binlog复制,用于实现数据的实时同步,确保多节点数据的一致性。 12. **边缘计算**:在靠近数据产生的地方进行数据交换和处理,减少延迟,提升用户体验,特别适用于物联网场景。 13....
3. **JavaScript交互**:在JavaScript中,可以通过`document.getElementById('myOcx')`获取到ActiveX对象,然后调用其方法或访问属性实现数据交换。例如,如果ActiveX控件有一个名为`getData`的方法,你可以这样调用...
js 实现 交换表的行! 值得下载看看!资源免费,大家分享!!
我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没...
js数组数据和对象数据做比较,并改变数组的值
4. **JSON(JavaScript Object Notation)**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。相比XML,JSON更简洁,更适合在网络上传输。在安卓应用中,Android SDK提供了Gson库和...
标题中的“JavaScript html js页面刷新之后下拉菜单选中值不变”是一个常见的前端开发问题,涉及到浏览器缓存、页面状态保持以及JavaScript操作DOM元素的知识点。在这个场景中,开发者希望在用户选择下拉菜单的一项...
利用Objective-C+javaScrip解决开发中H5与原生混合过程中,js和原生交互繁琐,逻辑复杂,频繁交换数据的问题,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 利用...
该项目是采用Java语言开发的多语言支持型弹性流数据交换系统...ElasticFlow支持在多种数据端之间建立可计算的弹性流管道,实现数据的定时定量多渠道交换,适用于数据交换、搜索引擎、数据发布和数据仓库等多种场景。
在Android开发中,JSON(JavaScript Object Notation)是一种常见的数据交换格式,因其轻量级、易读、易写的特点,广泛应用于服务器与客户端之间的数据传输。本教程将深入讲解如何在Android平台上使用JSON进行网络...
在本文中,我们将深入探讨如何使用EFS(Enterprise Front-end System)前端框架与Struts2后端集成,通过解析XML来实现数据交换。EFS基于EXTJS,它提供了一个高效的企业级开发解决方案,旨在减轻后台开发人员在界面...
js for循环中实现进度条 & 快速解决js动态改变dom元素属性后页面及时渲染的问题
在JavaScript中实现图片拖拽并交换位置的功能是一项常见的交互设计技术,主要应用于网页或应用程序的界面设计中。这种功能能够提升用户体验,使用户能够通过直观的拖放操作来调整图片的顺序或布局。以下是对这一功能...
JavaScript是一种广泛应用于网页...总的来说,"js实现心电图"项目展示了如何利用JavaScript和Highcharts库来创建实时的医疗健康图表,这涉及到数据处理、图表渲染以及用户交互等多个方面,是Web开发中的一个实用案例。
Thrift的主要目标是解决系统间的数据交换问题,特别是针对异构系统间的高效通信。它提供了一种结构化的方式,允许开发者在多种编程语言之间创建和使用服务。 **Thrift的核心特性:** 1. **跨语言支持**:Thrift...
不过,我们可以通过两种方式来解决这个问题:1) 使用服务器端语言(如PHP、Node.js等)读取Excel文件,然后将数据以JSON或其他格式传递给前端;2) 使用客户端的库,如` SheetJS` 或 `FileSaver.js`,它们允许在...
通过本文,我们可以了解到ASP和JavaScript之间的数据通信方式,并学习如何使用ADO组件、JavaScript对象和DHTML对象来实现数据交换。 首先,我们需要了解ASP和JavaScript之间的数据通信的基本概念。ASP是在服务器端...