测试工具：IE FireFox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
center
{
font-size:12px;
color:red;
font-weight:bold;
}
select
{
font-size:12px;
color:green;
}
</style>
<BODY>
<span id='feedback'></span>
<form method="post" name="myform">
<table border="0" width="400">
<tr>
<td><CENTER>可选择排序方式</CENTER></td>
<td> </td>
<td><CENTER>已选择排序方式</CENTER></td>
</tr>
<tr>
<td width="40%">
<select multiple name="left" id="left" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<option value="20">测试数据一</option>
<option value="30">测试数据二</option>
<option value="40">测试数据三</option>
<option value="50">测试数据四</option>
<option value="60">测试数据五</option>
<option value="70">测试数据六</option>
<option value="80">测试数据七</option>
<option value="90">测试数据八</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
<input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%">
<select multiple name="right" id="right" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">
<INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">
<INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">
<INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">
</CENTER></td>
</tr>
</table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
//上移
function moveUp(obj)
{
for(var i=1; i < obj.length; i++)
{//最上面的一个不需要移动，所以直接从i=1开始
if(obj.options[i].selected)
{
if(!obj.options.item(i-1).selected)
{
var selText = obj.options[i].text;
var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i-1].text;
obj.options[i].value = obj.options[i-1].value;
obj.options[i].selected = false;
obj.options[i-1].text = selText;
obj.options[i-1].value = selValue;
obj.options[i-1].selected=true;
}
}
}
}
//下移
function moveDown(obj)
{
for(var i = obj.length -2 ; i >= 0; i--)
{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
if(obj.options[i].selected)
{
if(!obj.options[i+1].selected)
{
var selText = obj.options[i].text;
var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i+1].text;
obj.options[i].value = obj.options[i+1].value;
obj.options[i].selected = false;
obj.options[i+1].text = selText;
obj.options[i+1].value = selValue;
obj.options[i+1].selected=true;
}
}
}
}
//移动
function moveOption(obj1, obj2)
{
for(var i = obj1.options.length - 1 ; i >= 0 ; i--)
{
if(obj1.options[i].selected)
{
var opt = new Option(obj1.options[i].text,obj1.options[i].value);
opt.selected = true;
obj2.options.add(opt);
obj1.remove(i);
}
}
}
//置顶
function moveTop(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
var index = 0 ;
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt, index++);
}
}
//置底
function moveBottom(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt);
}
}
//-->
</SCRIPT>
相关推荐
本篇文章将详细探讨如何使用JavaScript实现一个功能完备的表格，包括置顶、置底、上移、下移、添加和删除行的操作。 首先，我们需要创建一个基本的HTML结构，包含一个`<table>`元素，以及用于控制表格操作的按钮。...
本文将深入探讨“jQuery Select 上移下移”这一主题，它涉及到如何利用jQuery来实现选择框（Select）中选项的上移和下移功能。 一、jQuery Select 基础 在HTML中，`<select>`元素用于创建下拉列表，而`<option>`...
当用户执行上移、下移、置顶或置底操作时，我们需要记录当前选中的行，并根据操作类型更新行的位置。例如，上移操作需要将当前行插入到其前一行之前，而下移操作则需要将当前行插入到其后一行之后。置顶操作则需要将...
在编程领域，"上移下移代码"通常指的是在源代码文件中调整代码段的位置，以便改变它们的执行顺序或优化代码结构。这是一项常见的编程任务，尤其在处理逻辑流程或者重构代码时。以下是根据标题和描述涉及的一些关键...
本话题主要关注如何在EasyUI的datagrid中实现行的动态操作，包括上移、下移、置顶、置底以及通过键盘事件进行交互，并且涉及数据排序和后台绑定。 首先，EasyUI的datagrid允许开发者以直观的方式展示和管理数据。在...
在本文中，我们将深入探讨如何使用 jQuery 来实现 Select 元素中的选项上移、下移、左移和右移功能。这对于需要动态调整选择项顺序的交互式应用非常有用，比如在线表单编辑或者配置工具。让我们逐一解析这个主题。 ...
本主题将详细探讨如何使用jQuery实现表格（table）中的行上移、下移和置顶功能，这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前，确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用： ...
本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能，并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先，我们需要创建一个HTML表格元素，包含若干行（tr）和单元格（td）。例如：...
在网页开发中，"置顶"和"置底"的功能是非常常见的需求，它们通常用于...以上就是关于使用JavaScript实现置顶和置底功能的详细讲解，希望对你有所帮助。在实际项目中，你还可以结合CSS3的动画效果，使切换过程更加平滑。
### JSP 页面数据的上移下移实现方法 在网页应用开发中，有时我们需要实现列表项的上下移动功能，例如调整导航菜单、列表排序等。本文将详细介绍如何使用 JavaServer Pages (JSP) 实现这一功能，并通过示例代码进行...
这个"jQuery表格上移下移置顶代码.zip"文件包含了一个利用jQuery实现的功能，允许用户对表格中的数据行进行上移、下移和置顶操作，这在数据管理或展示界面中非常常见，比如在后台管理系统或者数据分析应用中。...
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
### 存储过程实现 GridView 的上移下移 在数据库应用程序开发中，有时我们需要实现数据项的排序功能，比如在网格视图（GridView）中调整记录的顺序。本篇文章将详细解析如何通过 SQL Server 存储过程来实现 ...
综上所述，"上移下移及表格复选框获取"这个功能涵盖了Web开发中的表格布局、用户交互、事件处理、数据操作等多个核心知识点，需要开发者具备扎实的HTML、CSS和JavaScript基础，同时也需要了解现代Web开发的最佳实践...
总结起来，这个项目展示了如何结合CSS和JavaScript来创建一个交互式的呼吸灯效果，并能根据需求将其置顶或置底。通过调整CSS的动画关键帧和JavaScript对DOM的操作，我们可以实现各种定制化的功能，为用户提供更加...
总的来说，通过这个简单的实例，我们不仅学习了如何使用JavaScript实现数组元素的上移和下移操作，更通过这个过程加深了对JavaScript数组操作方法的认识，并且可以将这种认识应用到解决更复杂的问题上。在前端开发...
这篇教程主要讲解了如何使用JS实现点击上移下移LI行数据的功能，这在创建交互式列表，如任务列表或者菜单栏时非常实用。下面将详细阐述实现这个功能的关键步骤和涉及的JavaScript技术。 首先，我们需要理解HTML结构...
总的来说，这段代码提供了一个完整的解决方案，可以在JavaScript环境中实现数组元素的上移和下移功能，这对于需要动态调整列表顺序的Web应用来说非常实用。需要注意的是，这个实现假设数组索引是从0开始的，因此在...
JavaScript网页置顶是一种常见的网页交互效果，它允许页面上的某个元素始终保持在用户视野的顶部，即使用户滚动页面，该元素也会固定在屏幕的特定位置。这种技术在网站导航、侧边栏广告或实时通知等场景中非常常见。...
【jQuery实现的网站漂浮置顶与置底特效详解】 jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。在本项目中，"基于jQuery实现的网站漂浮置顶和置底特效源码...