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数组常用操作技巧汇总
Nov 17 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
js 奇葩技巧之隐藏代码
Aug 11 Javascript
JScript实现地址选择功能
Aug 15 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
微信小程序云开发之数据库操作
May 18 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python模拟用户登录验证
2017/09/11 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
基于django传递数据到后端的例子
2019/08/16 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
谈谈python垃圾回收机制
2020/09/27 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
《赠汪伦》教学反思
2014/04/12 职场文书
我的老师教学反思
2014/05/01 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
开业典礼致辞
2015/07/29 职场文书
房产遗嘱范本
2015/08/06 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server