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程序设计有所帮助。

相关文章

  • 关于在Typescript中做错误处理的方式详解

    关于在Typescript中做错误处理的方式详解

    错误处理是软件工程重要的一部分,如果处理得当,它可以为你节省数小时的调试和故障排除时间,我发现了与错误处理相关的三大疑难杂症:TypeScript的错误类型,变量范围和嵌套,让我们逐一深入了解它们带来的挠头问题,感兴趣的朋友可以参考下
    2023-09-09
  • swiper实现异形轮播效果

    swiper实现异形轮播效果

    这篇文章主要为大家详细介绍了swiper实现异形轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 微信小程序云开发实现搜索功能

    微信小程序云开发实现搜索功能

    这篇文章主要为大家详细介绍了微信小程序云开发实现搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • js简单实现标签云效果实例

    js简单实现标签云效果实例

    这篇文章主要介绍了js简单实现标签云效果,基于miaov.js文件实现标签云的3D滚动效果,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • 代码详解JS操作剪贴板

    代码详解JS操作剪贴板

    本篇文章给大家介绍了如何用JS操作剪贴板的功能,并把实例代码做了分享,需要的朋友学习下吧。
    2018-02-02
  • JAVA中截取字符串substring用法详解

    JAVA中截取字符串substring用法详解

    这篇文章主要介绍了JAVA截取字符串 substring方法,要的朋友可以参考下
    2017-04-04
  • javascript和php使用ajax通信传递JSON的实例

    javascript和php使用ajax通信传递JSON的实例

    今天小编就为大家分享一篇javascript和php使用ajax通信传递JSON的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 微信小程序实现多行文字滚动

    微信小程序实现多行文字滚动

    这篇文章主要为大家详细介绍了微信小程序实现多行文字滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue3中Element Plus全局组件配置中文的两种方案

    vue3中Element Plus全局组件配置中文的两种方案

    element-plus组件文字语言默认是英文,需要手动更改一下中文包 ,本文主要介绍了vue3中Element Plus全局组件配置中文的两种方案,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 封装的dialog插件 基于bootstrap模态对话框的简单扩展

    封装的dialog插件 基于bootstrap模态对话框的简单扩展

    这篇文章主要介绍了基于bootstrap模态对话框的简单扩展,bootstrap-mzDialog插件的封装,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论