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

 更新时间:2015年03月18日 11:49:34   作者:上大王  
这篇文章主要介绍了JavaScript控制listbox列表框的项目上下移动的方法,实例分析了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程序设计有所帮助。

相关文章

  • 全解跨域请求问题处理方法及分析

    全解跨域请求问题处理方法及分析

    这篇文章主要为大家介绍了全解跨域请求问题处理方法及分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-07-07
  • JS延迟加载的几种方式小结

    JS延迟加载的几种方式小结

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件,JS延迟加载有助于提高页面加载速度,本文小编给大家介绍了JS延迟加载的几种方式小结,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • JavaScript实现图片滑动切换的代码示例分享

    JavaScript实现图片滑动切换的代码示例分享

    这篇文章主要介绍了JavaScript实现图片滑动切换的代码示例分享,能够控制包括滑动时间和切换数量等,需要的朋友可以参考下
    2016-03-03
  • 使用AJAX实现Web页面进度条的实例分享

    使用AJAX实现Web页面进度条的实例分享

    这篇文章主要介绍了使用AJAX实现Web页面进度条的实例分享,利用AJAX的异步来显示服务器端的处理进度是当下比较流行的做法,需要的朋友可以参考下
    2016-05-05
  • JavaScript 题型问答有答案参考

    JavaScript 题型问答有答案参考

    JavaScript 题型问答有答案参考,都是一些开发中容易碰到的问题。
    2010-02-02
  • 详解javascript立即执行函数表达式IIFE

    详解javascript立即执行函数表达式IIFE

    本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript的函数、创建对象、封装、属性和方法、继承

    javascript的函数、创建对象、封装、属性和方法、继承

    从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法
    2011-03-03
  • javascript实现tab切换特效

    javascript实现tab切换特效

    这篇文章主要介绍了javascript实现tab切换特效,实现的方法很简单,特别适合初学者学习javascript实现tab切换特效,tab切换再也不是问题,需要的朋友可以参考下
    2015-11-11
  • JavaScript数据结构之链表各种操作详解

    JavaScript数据结构之链表各种操作详解

    数据结构是一种有效处理大量数据的手段,了解它的结构和组成为我们提供了更有效的工具来设计与某些问题相关的产品。这次我们将进行链表介绍,回顾它的特点和用途
    2022-10-10
  • JavaScript era库的使用详解

    JavaScript era库的使用详解

    这篇本文主要给大家介绍了JavaScript era库的使用,使用 ora 这个 JavaScript 库可以在命令行应用程序中提供漂亮的加载状态提示,本文详细介绍如何使用该库,并结合多个例子演示其功能,需要的朋友可以参考下
    2024-02-02

最新评论