js简单实现Select互换数据的方法


Posted in Javascript onAugust 17, 2015

本文实例讲述了js简单实现Select互换数据的方法。分享给大家供大家参考。具体如下:

这里基于javascript实现两个Select互换数据,简单实用,大家都见到过的,不多说了,即使手头暂时用不上,收藏起来,以备后用。

运行效果如下图所示:

js简单实现Select互换数据的方法

在线演示地址如下:

具体代码如下:

<title>两个Select互换数据,简单实用</title>
<script language="JavaScript">
var MainSel = null;
var SlaveSel = null;
var Item_org = new Array();function DoAdd(){
 var this_sel = null;
 for(var i=0;i<MainSel.options.length;i++){
  this_sel = MainSel.options[i];
  if(this_sel.selected){
   SlaveSel.appendChild(this_sel);
   i--;
  }
 }
 sort_Main(SlaveSel);
}function DoDel(){
 var this_sel = null;
 for(var i=0;i<SlaveSel.options.length;i++){
  this_sel = SlaveSel.options[i];
  if(this_sel.selected){
   MainSel.appendChild(this_sel);
   i--;
  }
 }
 sort_Main(MainSel);
}function sort_Main(the_Sel){
 var this_sel = null;
 for(var i=0;i<Item_org.length;i++){
  for(var j=0;j<the_Sel.options.length;j++){
   this_sel = the_Sel.options[j];
   if(this_sel.value==Item_org[i][0] && this_sel.text==Item_org[i][1]){
    the_Sel.appendChild(this_sel);
   }
  }
 }
}window.onload=function(){
 MainSel = select1;
 SlaveSel = select2;
 MainSel.ondblclick=DoAdd;
 SlaveSel.ondblclick=DoDel;
 var this_sel = null;
 for(var i=0;i<MainSel.options.length;i++){
  this_sel = MainSel.options[i];
  Item_org.push(new Array(this_sel.value,this_sel.text));
 }
}
</script>
<table width="300" border="0" cellspacing="0" cellpDoAdding="0" align="center">
 <tr>
 <td width="45%" align="center">
 <select id="select1" size="5" multiple style="width: 100px">
  <option value="111">111</option>
  <option value="222">222</option>
  <option value="333">333</option>
  <option value="444">444</option>
  <option value="555">555</option>
  <option value="666">666</option>
  </select> 
 </td>
 <td width="10%" align="center">
 <input name="DoAdd" type="button" value=">>" onClick="DoAdd()"><br>
 <input name="DoDel" type="button" value="<<" onClick="DoDel()">
 </td>
 <td width="45%" align="center">
 <select id="select2" size="5" multiple style="width: 100px">
 </select>
 </td>
 </tr>
</table>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 #Javascript
关于js里的this关键字的理解
Aug 17 #Javascript
Nginx上传文件全部缓存解决方案
Aug 17 #Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 #Javascript
javascript中 try catch用法
Aug 16 #Javascript
You might like
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
请离开include_once和require_once
2013/07/18 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
图片之间的切换
2006/06/26 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python中的单继承与多继承实例分析
2018/05/10 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
校领导推荐信
2013/11/01 职场文书
绿色城市实施方案
2014/03/19 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
PHP获取学生成绩的方法
2021/11/17 PHP