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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
vue 中filter的多种用法
Apr 26 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
js实现飞机大战游戏
Aug 26 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 GD绘制24小时柱状图
2008/06/28 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
专业销售业务员求职信
2013/11/18 职场文书
教学实验楼管理制度
2014/02/01 职场文书
幼儿园运动会口号
2014/06/07 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL