<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select列表框交换数据</TITLE>
</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">ASP</option>
<option value="30">PHP</option>
<option value="40">ASP.NET</option>
<option value="50">JSP</option>
<option value="60">VB</option>
<option value="70">DELPHI</option>
<option value="80">AJAX</option>
<option value="90">JQUERY</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>
</body>
</html>
分享到：
相关推荐
在网页开发中，经常需要实现两个列表框（listbox）之间的数据交换功能，即从一个列表框中选择某些项并移动到另一个列表框中。本文将详细介绍如何使用JavaScript来实现这一功能，并通过实例来具体分析操作列表框的...
在这个“易语言源码超级列表框数据库排序.7z”压缩包中，我们可以找到一个关于如何在易语言中实现超级列表框与数据库进行数据排序的示例代码。 超级列表框（Super ListBox）是易语言提供的一种控件，它比标准的列表...
5. 拖放支持：允许用户通过拖放操作重新排序列表项，或者与其他控件交换数据。 6. 鼠标和键盘事件处理：提供自定义的鼠标点击和键盘导航行为，以实现更丰富的用户交互。 为了使用CGfxListView，开发者需要了解如何...
Ajax动态加载列表框，简单来说，就是利用Ajax技术来实现在用户交互时动态更新下拉选择框（Select Box）中的选项，而无需整个页面刷新。这种联动效果常见于多级联动选择、根据前一选择过滤后一选择等场景，极大地提高...
其中，第一个下拉列表框的`onChange`事件将触发AJAX请求，以动态填充第二个下拉列表框的数据。 ```html ;charset=gb2312" %> <title>MyHtml.html</title> <!-- 第一个下拉列表框 --> <select name="state" ...
本文将深入探讨如何使用jQuery实现列表框的双向选择操作，这是一个常见的功能需求，尤其在数据筛选、信息交换等场景下。 首先，我们要理解双向选择的基本概念。双向选择通常指的是用户可以在两个独立的列表框之间...
1. JSON数组：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在这个上下文中，JSON数组很可能包含了中国所有省份、城市和区县的名称及其对应的ID，...
2. **AJAX（Asynchronous JavaScript and XML）**：标签中提到了AJAX，它是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在本例中，AJAX可能被用来异步地从后台获取省市区的数据，填充到...
AJAX的核心是XMLHttpRequest对象，它可以在后台与服务器交换数据，并更新部分网页内容。尽管名称中有XML，但实际的数据格式可以是JSON、HTML或任何其他格式。在这个例子中，我们可能使用JSON，因为它是轻量级且易于...
XML是一种常用的数据交换格式，尤其适用于前后端分离的项目。在这个场景中，XML文件可能包含了一棵或多棵树状结构，每棵树对应一个下拉列表，树的节点则对应于下拉列表的选项。当用户在某个下拉列表中选择一个选项时...
这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉列表的标记，通过`<option>`标签定义选项。例如： ```html <select id...
本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**：jQuery是一个高效、简洁且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中，jQuery用于...
创建两个`<select>`元素，分别代表源列表和目标列表。每个`<select>`可以设置`multiple`属性以允许多选。为了美观和交互，还可以添加按钮，用于将选中的项从一个列表移动到另一个列表。 2. **jQuery选择器和事件**...
标题中的"A_jquery+select框图片选择器点击图片给表单select框赋值分享源码学习a"，指的是一个基于jQuery实现的交互式功能，它将图片选择与HTML的`<select>`下拉框相结合。这个功能允许用户通过点击图片来改变`...
1. **Ajax 技术**：动态获取数据的核心技术是Ajax（Asynchronous JavaScript and XML），它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在JavaScript中，可以使用`XMLHttpRequest`对象或者...
接着，使用Resource Editor添加一个新的对话框资源，设计用户界面，包括按钮控件（如"OK"按钮）和其他可能的显示元素，如列表框或者文本控件，用于显示未排序和排序后的数据。 2. **关联消息处理函数**：在头文件...
易语言提供了丰富的控件库，如文本框、按钮、列表框等，可以方便地构建图形化界面。 6. 源码学习价值： 对于易语言学习者来说，此资源具有很高的学习价值。它展示了如何使用易语言与数据库交互、处理数据以及设计...