测试工具：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>
相关推荐
在编程领域，"上移下移代码"通常指的是在源代码文件中调整代码段的位置，以便改变它们的执行顺序或优化代码结构。这是一项常见的编程任务，尤其在处理逻辑流程或者重构代码时。以下是根据标题和描述涉及的一些关键...
本话题主要关注如何在EasyUI的datagrid中实现行的动态操作，包括上移、下移、置顶、置底以及通过键盘事件进行交互，并且涉及数据排序和后台绑定。 首先，EasyUI的datagrid允许开发者以直观的方式展示和管理数据。在...
在本文中，我们将深入探讨如何使用 jQuery 来实现 Select 元素中的选项上移、下移、左移和右移功能。这对于需要动态调整选择项顺序的交互式应用非常有用，比如在线表单编辑或者配置工具。让我们逐一解析这个主题。 ...
本主题将详细探讨如何使用jQuery实现表格（table）中的行上移、下移和置顶功能，这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前，确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用： ...
本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能，并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先，我们需要创建一个HTML表格元素，包含若干行（tr）和单元格（td）。例如：...
在网页开发中，"置顶"和"置底"的功能是非常常见的需求，它们通常用于...以上就是关于使用JavaScript实现置顶和置底功能的详细讲解，希望对你有所帮助。在实际项目中，你还可以结合CSS3的动画效果，使切换过程更加平滑。
在Web开发中，经常需要对元素进行排序，比如在后台管理系统中对标签或列表项进行上移、下移以及置顶的操作。本文将详细解释如何使用jQuery实现这些功能，并提供相应的代码示例。 首先，要实现标签上移、下移、置顶...
对于Web应用程序，由于页面刷新会导致状态丢失，你需要在客户端使用JavaScript或者在服务器端使用ViewState来保存和恢复状态，以确保上移和下移操作的正确性。 4. 无刷新操作： 要实现无刷新操作，通常需要使用...
### 存储过程实现 GridView 的上移下移 在数据库应用程序开发中，有时我们需要实现数据项的排序功能，比如在网格视图（GridView）中调整记录的顺序。本篇文章将详细解析如何通过 SQL Server 存储过程来实现 ...
综上所述，"上移下移及表格复选框获取"这个功能涵盖了Web开发中的表格布局、用户交互、事件处理、数据操作等多个核心知识点，需要开发者具备扎实的HTML、CSS和JavaScript基础，同时也需要了解现代Web开发的最佳实践...
本文主要介绍了使用jQuery实现表格中行上移、下移以及置顶的方法，这涉及到对网页元素特别是表格单元进行DOM操作的技巧。在当前的Web开发过程中，对页面元素的操作变得十分重要，尤其是在动态的交互式网页设计中。...
总的来说，通过这个简单的实例，我们不仅学习了如何使用JavaScript实现数组元素的上移和下移操作，更通过这个过程加深了对JavaScript数组操作方法的认识，并且可以将这种认识应用到解决更复杂的问题上。在前端开发...
总的来说，这段代码提供了一个完整的解决方案，可以在JavaScript环境中实现数组元素的上移和下移功能，这对于需要动态调整列表顺序的Web应用来说非常实用。需要注意的是，这个实现假设数组索引是从0开始的，因此在...
JavaScript网页置顶是一种常见的网页交互效果，它允许页面上的某个元素始终保持在用户视野的顶部，即使用户滚动页面，该元素也会固定在屏幕的特定位置。这种技术在网站导航、侧边栏广告或实时通知等场景中非常常见。...
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等
JavaScript中的Select对象是HTML表单元素Select的编程接口，它提供了对下拉列表的操作功能。在Web开发中，Select元素通常用于创建用户可以选择的多个选项。以下是对标题和描述中涉及的知识点的详细说明： 1. **动态...
在JavaScript中实现列表的上移、下移和删除功能，是常见的前端交互需求，尤其在管理界面中。这里我们将详细探讨如何使用纯JS来完成这些功能，并结合HTML和CSS进行页面布局。 首先，HTML结构是实现这些功能的基础。...
这篇教程主要讲解了如何使用JS实现点击上移下移LI行数据的功能，这在创建交互式列表，如任务列表或者菜单栏时非常实用。下面将详细阐述实现这个功能的关键步骤和涉及的JavaScript技术。 首先，我们需要理解HTML结构...
然后，用一个透明的div覆盖在原生select上，这个div看起来像是一个下拉列表，并且具有与原生select一样的功能。这个覆盖层可以使用CSS自由地进行样式设计。 5. 同步更新：无论是哪种方法，在用户选择了自定义下拉...
如资源名，使用JAVASCRIPT动态创建一个Select元素和text元素