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 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
JS如何把字符串转换成json
Feb 21 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
什么是python的列表推导式
2020/05/26 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
师德师风演讲稿
2014/05/05 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
先进学校事迹材料
2014/12/30 职场文书
民主生活会主持词
2015/07/01 职场文书
python基础之爬虫入门
2021/05/10 Python