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 应用技巧集合[推荐]
Aug 30 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
fastadmin中调用js的方法
May 14 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
node+multer实现图片上传的示例代码
Feb 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
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript 特殊字符串
2009/02/25 Javascript
range 标准化之获取
2011/08/28 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python中模块查找的原理与方法详解
2017/08/11 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
班级体育活动总结
2014/07/05 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
个人年终总结结尾
2015/03/06 职场文书
早会开场白台词大全
2015/06/01 职场文书