Wednesday, March 13, 2013

Moving Listitems between two listbox using javascript.

This example shows how to move items between two ListBox. Basically it allows us to move multiple list items from right to left & Left to right on click event.


<!DOCTYPE html>
<html>
    <head>
        <title>move accross List box</title>
        <style>
            .list{
                float: left;
            }
            #list1,#list2{
                width: 100px;
                height:100px;
            }
            input[type='button']{
                width: 30px;
                float: left;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class="list">
            <select name="list1" id="list1" multiple="multiple">
                <option value="opt1">opt1</option>
                <option value="opt2">opt2</option>
                <option value="opt3">opt3</option>
                <option value="opt4">opt4</option>
                <option value="opt5">opt5</option>
                <option value="opt6">opt6</option>
                <option value="opt7">opt7</option>
                <option value="opt8">opt8</option>
                <option value="opt9">opt9</option>
                <option value="opt10">opt10</option>
                <option value="opt11">opt11</option>
            </select>
        </div>
        <input type="button" name=">" value=">" onclick="moveacross('list1','list2')">
        <input type="button" name="<" value="<" onclick="moveacross('list2','list1')">
        <div class="list">
            <select name="list2" id="list2" multiple="multiple">
            </select>
        </div>
        <script>
            function moveacross(sourceID, destID) {
                var src = document.getElementById(sourceID);
                var dest = document.getElementById(destID);

                for(var count=0; count < src.options.length; count++) {

                    if(src.options[count].selected == true) {
                            var option = src.options[count];

                            var newOption = document.createElement("option");
                            newOption.value = option.value;
                            newOption.text = option.text;
                            newOption.selected = true;
                            try {
                                     dest.add(newOption, null); //Standard
                                     src.remove(count, null);
                             }catch(error) {
                                     dest.add(newOption); // IE only
                                     src.remove(count);
                             }
                            count--;
                    }
                }
            }
        </script>
    </body>
</html>

and the output is:

Enjoy...