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 UrlDecode函数代码
Jan 09 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
angularJS提交表单(form)
Feb 09 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
angularJS开发注意事项
May 26 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
在vue中阻止浏览器后退的实例
Nov 06 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新手上路(九)
2006/10/09 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
react中Suspense的使用详解
2019/09/01 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
Python中文件操作简明介绍
2015/04/13 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python 类的特殊成员解析
2018/06/20 Python
详解python运行三种方式
2019/05/13 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
校园广播稿500字
2014/02/04 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书