js简单实现Select互换数据的方法

 更新时间:2015年08月17日 10:56:30   作者:企鹅  
这篇文章主要介绍了js简单实现Select互换数据的方法,涉及javascript动态操作select中option节点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js简单实现Select互换数据的方法。分享给大家供大家参考。具体如下:

这里基于javascript实现两个Select互换数据,简单实用,大家都见到过的,不多说了,即使手头暂时用不上,收藏起来,以备后用。

运行效果如下图所示:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-select-cha-data-codes/

具体代码如下:

<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实现获取img的原始尺寸的方法详解

    JavaScript实现获取img的原始尺寸的方法详解

    在微信小程序开发时,它的image标签有一个默认高度,这样你的图片很可能出现被压缩变形的情况,所以就需要获取到图片的原始尺寸对image的宽高设置,本文就来分享一下JavaScript实现获取img的原始尺寸的方法吧
    2023-03-03
  • javascript 45种缓动效果 非常酷

    javascript 45种缓动效果 非常酷

    javascript 45种缓动效果 非常酷,喜欢的朋友运行下看下效果。
    2011-06-06
  • Bootstrap表单组件教程详解

    Bootstrap表单组件教程详解

    表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程,感兴趣的朋友一起学习吧
    2016-04-04
  • js文本框输入点回车触发确定兼容IE、FF等

    js文本框输入点回车触发确定兼容IE、FF等

    js文本框输入点回车触发确定兼容IE、FF等,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-11-11
  • 用JavaScript 判断用户使用的是 IE6 还是 IE7

    用JavaScript 判断用户使用的是 IE6 还是 IE7

    判断IE浏览器的脚本,方便根据浏览器不懂,支持不同的代码的分别调用。
    2008-01-01
  • 用JS编写选项卡效果

    用JS编写选项卡效果

    这篇文章主要为大家详细介绍了用JS编写选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript+html实现前端页面滑动验证

    JavaScript+html实现前端页面滑动验证

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面滑动验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • fiv.js实现flv文件blob流实时播放的项目实践

    fiv.js实现flv文件blob流实时播放的项目实践

    本文主要介绍了fiv.js实现flv文件blob流实时播放的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js创建对象的方式总结

    js创建对象的方式总结

    这篇文章主要介绍了js创建对象的方式,实例总结了3种常用的创建对象的方式,非常实用,需要的朋友可以参考下
    2015-01-01
  • js验证手机号、密码、短信验证码代码工具类

    js验证手机号、密码、短信验证码代码工具类

    这篇文章主要介绍了js验证手机号、密码、短信验证码代码工具类,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论