JavaScript控制listbox列表框的项目上下移动的方法_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)         (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.

   
        India
        United States
        China
        Italy
        Germany
        Canada
        France
        United Kingdom
   

Move Up
Move Down
<script><br /> function listboxMove(listID, direction) {<br /> var listbox = document.getElementById(listID);<br /> var selIndex = listbox.selectedIndex;<br /> if(-1 == selIndex) {<br /> alert("Please select an option to move.");<br /> return;<br /> }<br /> var increment = -1;<br /> if(direction == 'up')<br /> increment = -1;<br /> else<br /> increment = 1;<br /> if((selIndex + increment) < 0 ||<br /> (selIndex + increment) > (listbox.options.length-1)) {<br /> return;<br /> }<br /> var selValue = listbox.options[selIndex].value;<br /> var selText = listbox.options[selIndex].text;<br /> listbox.options[selIndex].value = listbox.options[selIndex + increment].value<br /> listbox.options[selIndex].text = listbox.options[selIndex + increment].text<br /> listbox.options[selIndex + increment].value = selValue;<br /> listbox.options[selIndex + increment].text = selText;<br /> listbox.selectedIndex = selIndex + increment;<br /> }<br /> </script>

希望本文所述对大家的javascript程序设计有所帮助。