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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
基于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
德生PL330测评
2021/03/02 无线电
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php数组指针操作详解
2017/02/14 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
JS重要知识点小结
2011/11/06 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
JS中Array数组学习总结
2017/01/18 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Django中间件基础用法详解
2019/07/18 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 实现单例模式的5种方法
2020/09/23 Python
策划助理岗位职责
2013/11/18 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL