测试工具: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动态增加修改删除表格,上移下移功能”的项目中,开发者利用jQuery实现了对表格的动态操作,这在网页数据展示和管理中非常常见。 首先,我们来理解这个项目的标题:“jquery动态增加修改删除表格,上移...
本主题将详细探讨如何使用jQuery实现表格(table)中的行上移、下移和置顶功能,这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前,确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用: ...
本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能,并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先,我们需要创建一个HTML表格元素,包含若干行(tr)和单元格(td)。例如:...
在网页开发中,"置顶"和"置底"的功能是非常常见的需求,它们通常用于...以上就是关于使用JavaScript实现置顶和置底功能的详细讲解,希望对你有所帮助。在实际项目中,你还可以结合CSS3的动画效果,使切换过程更加平滑。
在Web开发中,经常需要对元素进行排序,比如在后台管理系统中对标签或列表项进行上移、下移以及置顶的操作。本文将详细解释如何使用jQuery实现这些功能,并提供相应的代码示例。 首先,要实现标签上移、下移、置顶...
对于Web应用程序,由于页面刷新会导致状态丢失,你需要在客户端使用JavaScript或者在服务器端使用ViewState来保存和恢复状态,以确保上移和下移操作的正确性。 4. 无刷新操作: 要实现无刷新操作,通常需要使用...
在本文中,我们将深入探讨如何使用jqGrid,一个基于jQuery的表格插件,来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据,包括与服务器端的数据交互。当我们需要调整表格中数据...
### 存储过程实现 GridView 的上移下移 在数据库应用程序开发中,有时我们需要实现数据项的排序功能,比如在网格视图(GridView)中调整记录的顺序。本篇文章将详细解析如何通过 SQL Server 存储过程来实现 ...
综上所述,"上移下移及表格复选框获取"这个功能涵盖了Web开发中的表格布局、用户交互、事件处理、数据操作等多个核心知识点,需要开发者具备扎实的HTML、CSS和JavaScript基础,同时也需要了解现代Web开发的最佳实践...
### JavaScript操作select大全 在网页开发中,`<select>`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`<select>`元素的方法,包括判断选项是否被选中、增删改选项及其属性等实用...
本文主要介绍了使用jQuery实现表格中行上移、下移以及置顶的方法,这涉及到对网页元素特别是表格单元进行DOM操作的技巧。在当前的Web开发过程中,对页面元素的操作变得十分重要,尤其是在动态的交互式网页设计中。...
总的来说,通过这个简单的实例,我们不仅学习了如何使用JavaScript实现数组元素的上移和下移操作,更通过这个过程加深了对JavaScript数组操作方法的认识,并且可以将这种认识应用到解决更复杂的问题上。在前端开发...
总的来说,这段代码提供了一个完整的解决方案,可以在JavaScript环境中实现数组元素的上移和下移功能,这对于需要动态调整列表顺序的Web应用来说非常实用。需要注意的是,这个实现假设数组索引是从0开始的,因此在...
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等
JavaScript中的Select对象是HTML表单元素Select的编程接口,它提供了对下拉列表的操作功能。在Web开发中,Select元素通常用于创建用户可以选择的多个选项。以下是对标题和描述中涉及的知识点的详细说明: 1. **动态...
在JavaScript中实现列表的上移、下移和删除功能,是常见的前端交互需求,尤其在管理界面中。这里我们将详细探讨如何使用纯JS来完成这些功能,并结合HTML和CSS进行页面布局。 首先,HTML结构是实现这些功能的基础。...
这篇教程主要讲解了如何使用JS实现点击上移下移LI行数据的功能,这在创建交互式列表,如任务列表或者菜单栏时非常实用。下面将详细阐述实现这个功能的关键步骤和涉及的JavaScript技术。 首先,我们需要理解HTML结构...