<!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>
<td></td>
<td><CENTER>
</CENTER></td>
</tr>
<tr>
<td width="27%">
<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="7%" 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="27%">
<select multiple name="right" id="right" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
<option value="33">ertevv</option>
<option value="11">aerwrew</option>
<option value="22">JQUddddERY</option>
</select>
</td>
</td>
<td width="7%" align="center">
<input type="button" value=" >> " onclick="moveOption(document.getElementById('right'),document.getElementById('right2'))"><br><br>
<input type="button" value=" << " onclick="moveOption(document.getElementById('right2'), document.getElementById('right'))">
</td>
<td width="27%">
<select multiple name="right2" id="right2" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right2'), document.getElementById('right'))">
</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>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right2'));">
<INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right2'));">
<INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right2'));">
<INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right2'));">
</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>
分享到:
相关推荐
js实现图片左右移动效果
js左右移动的特效代码。全部,喜欢的朋友可以下载。
js左右移动切换也可自动切换的焦点图demo
js点击左右按钮,图片左右移动,移动到中间的图片得到最大展示
javascript效果,实现数据多选,可以左右移动
原生js操作dom实现上下左右移动.docx
js 实现可以左右移动照片 类似QQ图片导航且可以自行调制
主要为大家详细介绍了js实现方块上下左右移动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
C#js实现ListBox左边的移动到右边,右边的移动到左边
js控制一个图片上下左右移动,网页游戏最基本的入门代码。
两个下拉列表数据左右移动.(按“SHIFT、CTRL”可以多选项移动)
图片感应鼠标左右移动代码 通过js控制实现图片感应鼠标左右移动
JS五张连篇,点击左右按钮可以移动!(图片左右滚动特效)主要用于想实现图片左右能滚动,点击左右按钮图片可以移动!!不错的!
鼠标右键功能,键盘控制echarts添加标记线、标记点,删除标记线、标记点,左右移动标记点、标记线
在网络上下载了一个纯js穿梭框,但是集成到项目中会冲突。查看js源码发现,原作者代码命名相对粗糙了。 var btn1 = document.getElementsByClassName('right')[0]; 项目中应该很多地方会出现class='right'的地方,...
收集的Javascript特效\图片左右移动效果--marquee.html
可以左右移动横向无缝滚动的JS图片展示,不明白的可以问我
有两个框,选择完之后点击移动,移动到右边,右边也可以移动到左边
javascript的左右滑动代码,纯js,没有用到jquery。简单实用,直接下载html页面放到服务器上运行即可。touchstart->touchmove->touchend 原理参照:...
accessible-news-slider-1.3.zip 这是一个让多个图片左右移动的js代码效果比较好看。