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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
js 操作select相关方法函数
2009/12/06 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python descriptor(描述符)的实现
2020/11/15 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
二年级班级文化建设方案
2014/05/10 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
针对吵架老公保证书
2015/05/08 职场文书