<!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的更多相关文章

  1. 列表框、分组列表框、标签（label）、分组框（fieldset）、框架(frameset)

    列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...

  2. 实现select联动效果，数据从后台获取

    效果如下: 当type值选择完后,amount值会自动相应填入. 1. 从后台获取数据,为一个数组,里面包含多个对象. <select id="scholarshipTypeSelec ...

  3. easy ui 下拉级联效果 ，下拉框绑定数据select控件

    html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...

  4. 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)

    1.两个select 内容互换 <!DOCTYPE html><html>    <head>        <meta charset="UTF- ...

  5. 获取select文本框的下拉菜单文字内容的两种方式

    <body> <div class="box"> <select id="sel"> <option value=&q ...

  6. 积累的VC编程小技巧之列表框

    1.列表框中标题栏(Column)的添加 创建一个List Control,其ID为IDC_LIST,在其Styles属性项下的View项里选择Report.Align项里选择Top.Sort项里选择 ...

  7. 使用 Bundle 在 Activity 之间交换数据

    [toc] 使用 Bundle 在 Activity 之间交换数据 场景 当一个 Activity 启动另一个 Activity 时,常常会有一些数据需要传过去.因为两个 Activity 之间本来就 ...

  8. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  9. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

随机推荐

  1. spark uniq 本质上就是单词计数

    粗体部分示例: # dns_domain_info_list_rdd ==> [(src_ip, domain, domain_ip, timestamp, metadataid), ....] ...

  2. Python: PS 滤镜--表面模糊

    本文用 Python 实现 PS 滤镜中的表面模糊,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/528 ...

  3. 洛谷P1462通往奥格瑞玛的道路——二分答案最短路

    题目:https://www.luogu.org/problemnew/show/P1462 最大值最小问题,二分答案. 代码如下: #include<iostream> #include ...

  4. kafka之三：kafka java 生产消费程序demo示例

    kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kafka的安装请参考官方文档. 首先我们需要新建一个maven项目,然后在 ...

  5. 896C

    ODT/珂朵莉树 原来这个东西很咸鱼,只能数据随机情况下nloglogn,不过作为卡常还是很好的 大概就是维护区间,值相同的并且连续当成一个区间存在set里,每次区间操作强行分裂就行了. 复杂度因为是 ...

  6. 一种C#开发ActiveX的思路

    由于某些原因,不得不在C#下开发ActiveX插件,而这会带来很多问题,主要有无法在线安装.无法自动更新.由于本人水平有些,这两个问题不一定是这样,如果有大侠知道C#下开发ActiveX插件可实现在线 ...

  7. Jacob开发文件转PDF

    这三种方法我都有试过word转PDF,第2种.第3种对于图片,表格.中文转换效果都不好,方法1效果最好.但方法1 只支持Windows环境下. 1.开发环境 Windows系统: 2.准备工作: st ...

  8. 【网络爬虫】【python】网络爬虫（一）：python爬虫概述

    python爬虫的实现方式: 1.简单点的urllib2 + regex,足够了,可以实现最基本的网页下载功能.实现思路就是前面java版爬虫差不多,把网页拉回来,再正则regex解析信息--总结起来 ...

  9. 极客时间_Vue开发实战_04.开发环境搭建

    Vue CLI的形式搭建环境: vue create hello-world 我们选择default默认的配置,提供babel和eslint的支持.如果你已经对工程化的东西非常了解了.你可以选择自定义 ...

  10. Flutter实战视频-移动电商-61.购物车_商品数量的加减操作

    61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...