JavaScript method to control listbox items to move up and down

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

WBOY

Release： 2016-05-16 16:08:52

Original

1169 people have browsed it

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.

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