效果：
HTML页面代码：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>js操作列表框</title>
</head>
<script language="javascript">
<!--
var ListUtil = new Object();
//全部移动
ListUtil.moveAll = function moveAll(oListboxFrom,oListboxTo){
var options = oListboxFrom.options;
for(var i = 0; i < options.length; i++){
oListboxTo.appendChild(options[i]); //???
i -= 1; //???每删除一个选项后，每个选项的index会被重置
}
}
//单个或多个移动
ListUtil.moveMuti = function moveMuti(oListboxFrom,oListboxTo){
var options = oListboxFrom.options;
for(var i = 0; i < options.length; i++){
if(options[i].selected){
oListboxTo.appendChild(options[i]);
i -= 1;
}
}
}
//上移
ListUtil.shiftUp = function(oListbox) {
if(oListbox.selectedIndex > 0){
var oOption = oListbox.options[oListbox.selectedIndex];
var oPrevOption = oListbox.options[oListbox.selectedIndex-1];
oListbox.insertBefore(oOption,oPrevOption);
}
}
//下移
ListUtil.shiftDown = function(oListbox){
if(oListbox.selectedIndex < oListbox.options.length-1){
var oOption = oListbox.options[oListbox.selectedIndex];
var oNextOption = oListbox.options[oListbox.selectedIndex+1];
oListbox.insertBefore(oNextOption,oOption);
}
}
//-->
</script>
<body text="#000000" bgcolor="#ffffff" link="#0033cc">
<form method=post action="#">
<table>
<tr>
<td>
未选员工
<select name="oListboxFrom" id="oListboxFrom" size="10" multiple="true"
style="width:100px;height:250px;margin-left:20px;float:left">
<option value="1" selected>员工1</option>
<option value="2">员工2</option>
<option value="3">员工3</option>
<option value="4">员工4</option>
<option value="5">员工5</option>
</select>
</td>
<td align="center">
<input type="button" value=" >>> "
onclick="ListUtil.moveAll(oListboxFrom, oListboxTo);" />
<br/>
<input type="button" value=" >> "
onclick="ListUtil.moveMuti(oListboxFrom, oListboxTo);" />
<br/>
<input type="button" value=" << "
onclick="ListUtil.moveMuti(oListboxTo, oListboxFrom);" />
<br/>
<input type="button" value=" <<< "
onclick="ListUtil.moveAll(oListboxTo, oListboxFrom);" />
<br/>
<input type="button" value=" ↑ "
onclick="ListUtil.shiftUp(oListboxFrom);" />
<br/>
<input type="button" value=" ↓ "
onclick="ListUtil.shiftDown(oListboxFrom);" />
</td>
<td>
已选员工
<select name="oListboxTo" id="oListboxTo" multiple="true" size="10"
style="width:100px;height:250px;margin-left:20px;float:left">
<option value="319094784">员工6</option>
<option value="320274432">员工8</option>
<option value="322109440">员工7</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
这里上下移动指的是在ListBox自身内切换选中项，而左右移动则涉及到在两个ListBox之间转移选中项。 1. **上下移动**： 要实现在ListBox内的上下移动，我们可以通过响应`KeyDown`事件来检查用户按下的是上箭头或下...
在JavaScript编程中，创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项，比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释： ...
用户可以通过滚动条上下滑动查看更多的行数据，左右滑动查看更多的列数据。在易语言中，超级列表框控件提供了丰富的属性和方法，使得开发者能灵活地控制数据的展示和交互。 2. **滚动条**：滚动条是用户界面中的一...
"jQuery穿梭框列表按钮控制左右移动代码.zip"是一个典型的示例，它展示了如何利用jQuery实现一种被称为穿梭框（Transfer Box）的功能。穿梭框是一种常见的UI组件，通常用于在两个列表之间转移项目，常见于数据选择或...
左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底
在树型框中，节点的上下移动涉及到数据的重新排序。例如，向上移动一个节点意味着将其位置交换到前一个节点，向下移动则是与后一个节点交换。这需要对树型框中的数据结构有深入理解，包括节点的父节点、子节点关系...
本文详细介绍了如何使用jQuery来实现网页上列表项的上下移动功能。在开始讲解之前，我们先来梳理一下知识点，确保我们讨论的范围是准确无误的。 首先，jQuery是一个快速、简洁的JavaScript库，它能够简化HTML文档...
【TV焦点滑动框移动效果demo】是一个专为Android电视应用设计的示例项目，它主要展示了如何在用户上下或左右滑动时实现焦点框在屏幕中的平滑移动，并始终保持在屏幕中间。这个demo是在一个基础的网络下载的示例上...
本文将详细解析"地铁、地图上下左右移动图 放大放小"这一主题，涵盖JS（JavaScript）实现地图的移动、缩放功能以及相关技术要点。 1. **JavaScript基础**：JS是网页动态效果的核心语言，它允许我们在用户与网页交互...
- **左右移动**：用户可以选择将左边列表的项移动到右边，反之亦然，以便于比较和选择。 - **检索功能**：支持快速搜索列表中的特定项目，提高用户查找效率。 - **多选模式**：通过`Ctrl`键实现多选，用户可以...
这个控件通常由两个列表框组成，允许用户在左右（或上下）两个列表之间移动项目，实现数据的筛选和选择。本示例是一个基于纯JavaScript实现的Dubal ListBox操作程序，它不依赖任何外部库，如jQuery或其他框架，这...
本篇文章将深入探讨如何在Delphi7的ListView上实现编辑功能，并允许用户在单元格间上下左右移动。 首先，我们需要创建一个Edit控件，当用户点击ListView的某个项（Item）或子项（SubItem）时，这个Edit控件会出现在...
微调按钮允许用户通过上下或左右移动滑块来调整数值。`CreateWindowEx()`创建，控件类型为`WC_TRACKBAR`。 4. **滑动条**（Slider）： 滑动条提供一种调整值的方式，与微调按钮类似，但通常用于连续的范围。创建...
穿梭框是UI设计中的一种组件，通常包含两个列表，用户可以在两个列表之间移动条目。在树形穿梭框中，这两个列表显示为树状结构，用户可以选择一个或多个节点，并将其从一边移到另一边。 3. **Vue.js框架**： Vue....
JavaScript穿梭框，通常被称为“选择框”或“穿梭列表”，是一种常见的前端交互组件，用于在两个列表之间方便地转移选项。这种组件常用于数据筛选、用户权限设置等场景，允许用户从一组选项中选择多个项目并移动到另...
本文将深入探讨“自定义可拖动列”这一技术，并结合描述中的关键词，详细介绍如何实现单条上下移动、左右框移动以及全部左移或右移的功能。 首先，"自定义可拖动列"的核心是实现列的动态布局，允许用户通过拖拽操作...
在提供的文件名列表中，我们看到有`.sln`和`.v12.suo`文件，这是Visual Studio解决方案和用户选项文件，它们通常与C#或Visual Basic .NET等.NET框架下的项目有关。`.liweiairen`可能是一个项目或类库的名称，而`Win...
4. 数据管理：为了实现视频列表的上下滑动切换，需要将所有视频数据存储在一个数组中，并通过数据绑定更新视图。同时，需要维护当前播放的视频索引。 5. 播放状态管理：在用户滑动时，需要暂停当前视频，加载并播放...
本文将深入探讨如何在Android软键盘上实现焦点移动，并支持上下左右按键以及回车键输入，以拉丁IME（LatinIME）输入法为例。 首先，焦点移动的关键在于监听和处理键盘事件。为了实现在软键盘上移动焦点，需要重写`...
【标题】"js游戏人物上下左右跑步效果源码"是一个前端开发相关的压缩包，其中包含了一个JavaScript实现的游戏人物移动效果的代码示例。这个源码主要用于帮助开发者理解如何在网页游戏中实现角色的动态跑步动画，支持...