JavaScript控制listbox列表框的项目上下移动的方法


Posted in Javascript onMarch 18, 2015

本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法。分享给大家供大家参考。具体分析如下:

这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用。下面是详细的代码

function listbox_move(listID, direction) {

    var listbox = document.getElementById(listID);

    var selIndex = listbox.selectedIndex;

    if(-1 == selIndex) {

        alert("Please select an option to move.");

        return;

    }

    var increment = -1;

    if(direction == 'up')

        increment = -1;

    else

        increment = 1;

    if((selIndex + increment) < 0 ||

        (selIndex + increment) > (listbox.options.length-1)) {

        return;

    }

    var selValue = listbox.options[selIndex].value;

    var selText = listbox.options[selIndex].text;

    listbox.options[selIndex].value = listbox.options[selIndex + increment].value

    listbox.options[selIndex].text = listbox.options[selIndex + increment].text

    listbox.options[selIndex + increment].value = selValue;

    listbox.options[selIndex + increment].text = selText;

    listbox.selectedIndex = selIndex + increment;

}

//..

//..

listbox_move('countryList', 'up'); //move up the selected option

listbox_move('countryList', 'down'); //move down the selected option

下面是详细的演示代码,可以在浏览器内使用
Click below buttons to select or deselect all options from select box.<br>

    <select id="lsbox" name="lsbox" size="10" multiple="">

        <option value="1">India</option>

        <option value="2">United States</option>

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

        <option value="4">Italy</option>

        <option value="5">Germany</option>

        <option value="6">Canada</option>

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

        <option value="8">United Kingdom</option>

    </select> <br>

<button onclick="listboxMove('lsbox', 'up');">Move Up</button>

<button onclick="listboxMove('lsbox', 'down');">Move Down</button>

<script>

function listboxMove(listID, direction) {

    var listbox = document.getElementById(listID);

    var selIndex = listbox.selectedIndex;

    if(-1 == selIndex) {

        alert("Please select an option to move.");

        return;

    }

    var increment = -1;

    if(direction == 'up')

        increment = -1;

    else

        increment = 1;

    if((selIndex + increment) < 0 ||

        (selIndex + increment) > (listbox.options.length-1)) {

        return;

    }

    var selValue = listbox.options[selIndex].value;

    var selText = listbox.options[selIndex].text;

    listbox.options[selIndex].value = listbox.options[selIndex + increment].value

    listbox.options[selIndex].text = listbox.options[selIndex + increment].text

    listbox.options[selIndex + increment].value = selValue;

    listbox.options[selIndex + increment].text = selText;

    listbox.selectedIndex = selIndex + increment;

}

</script>

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

Javascript 相关文章推荐
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
vuex实现购物车功能
Jun 28 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #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
You might like
PHP 类相关函数的使用详解
2013/05/10 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python 等差数列末项计算方式
2020/05/03 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
初级Java程序员面试题
2016/03/03 面试题
学期自我鉴定
2013/11/04 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
质量承诺书范文
2014/03/27 职场文书
协议书格式
2014/04/23 职场文书
项目合作意向书模板
2014/07/29 职场文书
自荐信格式模板
2015/03/27 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
大学生入党自传2015
2015/06/26 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python