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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
JavaScript十大取整方法实例教程
Dec 03 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 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript DOM基础
2015/04/13 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python pickle模块用法实例
2015/04/14 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python对json的相关操作实例详解
2017/01/04 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python下载网络小说实例代码
2018/02/03 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
django model object序列化实例
2020/03/13 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
宿舍卫生检讨书
2014/01/16 职场文书
求职简历自我评价范例
2014/03/12 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
离职信范文
2015/06/23 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书