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 相关文章推荐
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python 阶乘累加和的实例
2019/02/01 Python
Python读写文件基础知识点
2019/06/10 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python实现滑雪游戏
2020/02/22 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Django通过json格式收集主机信息
2020/05/29 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
天游软件面试
2013/11/23 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
《伯牙绝弦》教学反思
2014/03/02 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
服务宗旨标语
2014/07/01 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书