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 attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript对象学习小结
Sep 02 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
JavaScript实现筛选数组
Mar 02 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
laravel安装和配置教程
2014/10/29 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
一段实时更新的时间代码
2006/07/07 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
简单的三步vuex入门
2018/05/20 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
js实现旋转的星空效果
2019/11/01 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
python日志记录模块实例及改进
2017/02/12 Python
使用Python对Access读写操作
2017/03/30 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python opencv实现运动检测
2018/07/10 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python中get和post有什么区别
2020/06/19 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
收款委托书
2014/10/14 职场文书
投资入股合作协议书
2014/10/28 职场文书
小学教师个人总结
2015/02/05 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis