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 函数速查表
Feb 07 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
我的论坛源代码(二)
2006/10/09 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vuex的简单使用教程
2018/02/02 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python深入学习之内存管理
2014/08/31 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python 实现目录复制的三种小结
2019/12/04 Python
python使用配置文件过程详解
2019/12/28 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
上班玩手机检讨书
2014/02/17 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL