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 新浪网易的评论块制作
Jul 01 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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
使用php4加速网络传输
2006/10/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python创建子类的方法分析
2019/11/28 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
计算机系毕业生推荐信
2013/11/06 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
python实现简易名片管理系统
2021/04/11 Python
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server
科普 | 业余无线电知识-波段篇
2022/02/18 无线电