JavaScript controls how items in the listbox listbox move up and down

This example demonstrates how JavaScript controls the movement of items in the listbox list box up and down. Share with you for your reference. The specific analysis is as follows:

This JS code is useful for controlling the movement of elements up or down within listbox. The following is the detailed code

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

The following is a detailed demo code that you can use in your browser

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 has been helpful to your javascript programming.