左右两个Select列表框交换数据的JS
<!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>
左右两个Select列表框交换数据的JS的更多相关文章
- 列表框、分组列表框、标签（label）、分组框（fieldset）、框架(frameset)
列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...
- 实现select联动效果，数据从后台获取
效果如下: 当type值选择完后,amount值会自动相应填入. 1. 从后台获取数据,为一个数组,里面包含多个对象. <select id="scholarshipTypeSelec ...
- easy ui 下拉级联效果 ，下拉框绑定数据select控件
html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...
- 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)
1.两个select 内容互换 <!DOCTYPE html><html> <head> <meta charset="UTF- ...
- 获取select文本框的下拉菜单文字内容的两种方式
<body> <div class="box"> <select id="sel"> <option value=&q ...
- 积累的VC编程小技巧之列表框
1.列表框中标题栏(Column)的添加 创建一个List Control,其ID为IDC_LIST,在其Styles属性项下的View项里选择Report.Align项里选择Top.Sort项里选择 ...
- 使用 Bundle 在 Activity 之间交换数据
[toc] 使用 Bundle 在 Activity 之间交换数据 场景 当一个 Activity 启动另一个 Activity 时,常常会有一些数据需要传过去.因为两个 Activity 之间本来就 ...
- jQuery实现列表框双向选择操作
对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
随机推荐
- html5--3.19 新增的progress/meter元素
html5--3.19 新增的progress/meter元素 学习要点 了解progress/meter元素的用法 progress元素 是HTML5中新增的元素,用来建立一个进度条 通常与Java ...
- 封装class类为jar包提供给其他项目使用
一.完成class类的编写与测试工作 二.完善javadoc注释,生成自己的API 注释要按照标准要求进行 Project -- generate javadoc
- bzoj 2194 快速傅立叶之二 —— FFT
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2194 如果把 a 序列翻转,则卷积得到的是 c[n-i],再把得到的 c 序列翻转即可. 代 ...
- [转]解决pycharm无法导入本地包的问题（Unresolved reference 'tutorial'）
原文地址:https://www.cnblogs.com/yrqiang/archive/2016/03/20/5297519.html
- live555 基本类之间的关系
live555 中存在这5个最基本的类.每个类中都拥有一个BasicUsageEnvironment. 这是这几个类之间的相互关系. MediaSession可以拥有多个subsession.
- css animation 简写和参数
- VR视频原理
VR视频,这里指的是沉浸式全景视频,基本场景是观影者戴上显示头盔(如cardboard),在其中通过头部的转动可以看到全景视频的每个方向的图像.同时也能听到来自各个方向的声音,声音也会随着头部的转动而 ...
- qq开放平台可以应用到网页游戏的api整理
创建角色界面api整理 一.需求描述 1. 创建角色名称可以用qq空间昵称代替 2. 如果玩家是在新区玩的话,赠送老玩家支持礼包 3. 可以看到,好友xxx也在玩,而且到了多少等级,如果加为好友 ...
- Python3.6 字典的内置方法
1.dict.clear(self) 删除字典内所有元素 2.dict.copy(self) 返回一个字典的浅复制,拷贝父对象,不会拷贝对象的内部的子对象 3.dict.fromkeys(self, ...
- 《剑指offer面试题4》替换空格——实现函数把字符串中每个空格替换成“%20”
思路: 例如把we are happy这个字符串中所有空格替换成"%20",最直接的做法是从头开始扫苗,遇到空格就替换,并且把空格后面的字符都顺序后移.复杂度O(n^2). 重要思 ...