JavaScript method to control the up and down movement of items in listbox listbox

This article describes the method of JavaScript to control the up and down movement of items in a listbox list box. Share it for your reference. The specific analysis is as follows:

This JS code can control elements in listbox to move up or down, which is very useful. Below is the detailed code

The code copy 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 a detailed demonstration code that can be used in the browser

Copy the code as follows: 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>

I hope this article will be helpful to everyone's JavaScript programming.