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 继承机制的实现(待续)
May 18 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
基于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简单的会话类代码
2011/08/08 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
深入学习JavaScript中的bom
2019/05/27 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Python 如何创建一个线程池
2020/07/28 Python
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
《雪地里的小画家》教学反思
2014/02/22 职场文书
党员干部公开承诺书
2014/03/26 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
导游词之千岛湖
2019/09/23 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
python操作xlsx格式文件并读取
2021/06/02 Python