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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
javascript 写类方式之八
Jul 05 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Webpack的dll功能使用
Jun 28 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
vue-router为激活的路由设置样式操作
Jul 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Vue组件化开发思考
2018/02/02 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python字符串详细介绍
2015/05/09 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python爬取指定微信公众号文章
2018/12/20 Python
python读取文件名并改名字的实例
2019/01/07 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python实现粒子群算法的示例
2021/02/14 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
公司应聘自荐书
2014/06/14 职场文书
python入门之算法学习
2021/04/22 Python