Thursday, July 3, 2014

Listbox Move selected items Up / Down using javscript

 <select id="lsbox" name="lsbox" size="10" multiple="">
        <option value="1">India</option>
        <option value="2">United States</option>
        <option value="4">Italy</option>
        <option value="3">China</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>

No comments:

Post a Comment