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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 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中将数组转成XML格式的实现代码
2011/08/08 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
问卷调查计划书
2014/01/10 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS