JavaScript控制两个列表框listbox左右交换数据的方法


Posted in Javascript onMarch 18, 2015

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下:

这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动

function listbox_moveacross(sourceID, destID) {

    var src = document.getElementById(sourceID);

    var dest = document.getElementById(destID);

    for(var count=0; count < src.options.length; count++) {

        if(src.options[count].selected == true) {

                var option = src.options[count];

                var newOption = document.createElement("option");

                newOption.value = option.value;

                newOption.text = option.text;

                newOption.selected = true;

                try {

                         dest.add(newOption, null); //Standard

                         src.remove(count, null);

                 }catch(error) {

                         dest.add(newOption); // IE only

                         src.remove(count);

                 }

                count--;

        }

    }

}

//..

listbox_moveacross('countryList', 'selectedCountryList');

下面是像是的演示效果代码,可以直接在浏览器内执行
Click below buttons to move selected options right or left.<br>

<table>

<tbody><tr>

    <td>

<select id="sourceSelect" size="10" multiple="">

 <option value="a">Afghanistan</option>

 <option value="b">Bahamas</option>

 <option value="c">Barbados</option>

 <option value="d">Belgium</option>

 <option value="e">Bhutan</option>

 <option value="f">China</option>

 <option value="g">Croatia</option>

 <option value="h">Denmark</option>

 <option value="i">France</option>

</select>

    </td>

    <td>

        <button onclick="listboxMoveacross('sourceSelect', 'destSelect');">>></button>  <br>

        <button onclick="listboxMoveacross('destSelect', 'sourceSelect');"><<</button>

    </td>

    <td>

<select id="destSelect" size="10" multiple="">

 <option value="a">Afghanistan</option>

 <option value="b">Bahamas</option>

 <option value="c">Barbados</option>

 <option value="d">Belgium</option>

 <option value="e">Bhutan</option>

 <option value="f">China</option>

 <option value="g">Croatia</option>

 <option value="h">Denmark</option>

 <option value="i">France</option>

</select>

    </td>

</tr>

</tbody></table>

    <script>

function listboxMoveacross(sourceID, destID) {

    var src = document.getElementById(sourceID);

    var dest = document.getElementById(destID);

    for(var count=0; count < src.options.length; count++) {

        if(src.options[count].selected == true) {

                var option = src.options[count];

                var newOption = document.createElement("option");

                newOption.value = option.value;

                newOption.text = option.text;

                newOption.selected = true;

                try {

                         dest.add(newOption, null); //Standard

                         src.remove(count, null);

                 }catch(error) {

                         dest.add(newOption); // IE only

                         src.remove(count);

                 }

                count--;

        }

    }

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery实现根据类型自动显示和隐藏表单
Mar 18 #Javascript
jQuery实现列表的全选功能
Mar 18 #Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 #Javascript
JavaScript移除数组内重复元素的方法
Mar 18 #Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 #Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 #Javascript
Java File类的常用方法总结
Mar 18 #Javascript
You might like
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python学习入门之区块链详解
2017/07/25 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python读取实时数据流示例
2019/12/02 Python
浅谈Python __init__.py的作用
2020/10/28 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
土木工程应届生求职信
2013/10/31 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫