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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 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 MemCached 高级缓存应用代码
2010/08/05 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
详解Python中的多线程编程
2015/04/09 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
求网格中的黑点分布
2013/11/06 面试题
.net C#面试题
2012/08/28 面试题
劳资员岗位职责
2013/11/11 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
2014年党小组工作总结
2014/12/20 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技