当前位置：首页 > 资讯 > 技术文档

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

时间：2020-04-29 20:57 编辑：来源：阅读：
扫一扫，手机访问

摘要：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

下面是详细的演示代码，可以在浏览器内使用

[u]复制代码[/u] 代码如下:

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)

上一篇：react高阶组件经典应用之权限控制详解
下一篇：JS实现六边形3D拖拽翻转效果的方法

资讯排行榜
更多>>