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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 基于javascript实现listbox左右移动

    基于javascript实现listbox左右移动

    本文实例讲解了javascript实现listbox左右移动的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>listbox左右移动</title> </head> <body> &

  • JavaScript控制两个列表框listbox左右交换数据的方法

    本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 复制代码 代码如下: function listbox_moveacross(sourceID, destID) {     var src = document.getElementById(sourceID);     var dest = document.getEl

  • JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {

  • 用JavaScript实现类似于ListBox功能示例代码

    JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 复制代码 代码如下: <span style="font-size:14px;">{ "Table": [ { "Id": 3, "Type": "X", "Content": &

  • javascript实现listbox左右移动实现代码

    javascript实现listbox左右移动实现代码

    1. html部分: 复制代码 代码如下: <table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460" align="left" borderColorLight="#000000" border="1"> <tr bgColor="#cccccc

  • js 获取Listbox选择的值的代码

    复制代码 代码如下: <script type="text/javascript"> function GetValue() { var strlist = document.getElementById("ListBox1");//获取Listbox var str= ""; //遍历Listbox,取得选中项的值 if (strlist.options.length > 0) { for (var i = 0; i <

  • 使用javascript实现ListBox左右全选,单选,多选,全请

    复制代码 代码如下: <html><head>    <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">    <title>list测试</title></head><body>    <div style="font-size: 10pt;">      

  • JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目,我们不能从上到下的删除,因为上面的项目每删除一个,下面的项目的索引号就会变化,所以只能从下向上删除,这样就不会出现索引号乱变的问题了. html代码 复制代码 代码如下: <table> <tr> <td align="center"> <select id="lsbox" name="lsbox" size="10" multiple> <op

  • JS ListBox的简单功能实现代码

    JS ListBox的简单功能实现代码

    页面效果如下:代码也贴出来跟大家分享: 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

    本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用.下面是详细的代码 复制代码 代码如下: function listbox_move(listID, direction) {     var listbox = document.getElementById(listID);     var selIndex = listbox.selectedInd

  • JavaScript控制网页平滑滚动到指定元素位置的方法

    本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu

  • ASP.NET中 ListBox列表框控件的使用方法

    ListBox 控件允许用户从预定义的列表中选择一个或多个项.它与 DropDownList 控件的不同之处在于,它不但可以一次显示多个项,而且(可选)还允许用户选择多个项. 一.属性 属性 值 作用 SelectionMode Single|Multiple 列表选择模式:单选|多选 Selected False|True 是否为选中状态 二.示例 ListBox.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&q

  • 易语言根据项目索引选择列表框指定项目的方法

    易语言根据项目索引选择列表框指定项目的方法

    选择项目方法 英文命令:select 所属对象:列表框 选择或取消选择指定项目.成功返回真,失败返回假. 语法:  逻辑型  列表框．选择项目 (欲选择或取消选择的项目索引,［欲置入的项目选择状态］) 例程: 说明: 选择列表框的指定项目. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScreen() 作用:请求某个元素element全屏 Document.getElementById("myCanvas").requestFullScreen() 这里是将其中的元素ID去请求fullscreen 退出全屏 document.cancelFullScreen() Document

  • Python wxPython库使用wx.ListBox创建列表框示例

    Python wxPython库使用wx.ListBox创建列表框示例

    本文实例讲述了Python wxPython库使用wx.ListBox创建列表框.分享给大家供大家参考,具体如下: 如何创建一个列表框? 列表框是提供给用户选择的另一机制.选项被放置在一个矩形的窗口中,用户可以选择一个或多个.列表框比单选按钮占据较少的空间,当选项的数目相对少的时候,列表框是一个好的选择.然而,如果用户必须将滚动条拉很远才能看到所有的选项的话,那么它的效用就有所下降了.下图显示了一个wxPython列表框. 在wxPython中,列表框是类wx.ListBox的元素.该类的方法使

  • JavaScript实现动态删除列表框值的方法

    JavaScript实现动态删除列表框值的方法

    本文实例讲述了JavaScript实现动态删除列表框值的方法.分享给大家供大家参考.具体如下: 使用JavaScript 动态删除列表框中的值,实际运用中可能效果会比较复杂,这只是一个基本功能单元,很多都是在此基础上扩展而来,运行代码点击"删除",会将列表框中的值一一删除,只保留一项数据. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • JavaScript实现向OL列表内动态添加LI元素的方法

    本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

随机推荐