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

前端技术 2023/09/08 JavaScript

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

本文地址：https://www.stayed.cn/item/20541

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案