JavaScript method to control listbox items to move up and down_javascript skills

The example in this article describes how to use JavaScript to control the items in the listbox to move up and down. Share it with everyone for your reference. The specific analysis is as follows:

This JS code can control the elements in the listbox to move up or down. This function is very useful. The following is the detailed code

Copy code The code is as follows:

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

Below is the detailed demo code, which can be used in the browser

Copy code The code is as follows:

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