jQuery Plugin: List Mover Box

This is a very basic list box.

Selected Items:

Documentation

funcunit tests

javascript

          $(document).ready(function () {

            //This array will hold the values in the unassigned listbox
            var dataLeft = [];
            dataLeft.push("1, Unassigned Value One");
            dataLeft.push("2, Unassigned Value Two");
            dataLeft.push("3, Unassigned Value Three");

            //this array will contain the data in the assigned list
            var dataRight = [];
            dataRight.push("4, Assigned Value One");
            dataRight.push("5, Assigned Value Two");

            /*
            //Options:
            dataleft: The data in left side listbox
            dataright: The data in right side listbox
            size: the height of the boxes
            */
            $('#demo').MoverBoxes({ 'dataleft': dataLeft, 'dataright': dataRight, 'size': 20,'leftLabel':"Unassigned", 'rightLabel':"Assigned"  });



            //get the selected values so we can update the database or whatever.
            $('#GetSelected').click(function () {
                //clear out old selected
                $('#SelectedItems').html('');
                var selectedData = $('#demo').data('MoverBoxes').SelectedValues();

                //for each element in the array we will add to the listbox.
                for (var i in selectedData) {
                    var li_item = document.createElement("li");
                    $(li_item).html(selectedData[i])
                    $('#SelectedItems').append(li_item);
                }

            });

            $('#GetUnSelected').click(function () {
                //clear out old 
                $('#SelectedItems').html('');
                var selectedData = $('#demo').data('MoverBoxes').NotSelectedValues();

                //for each element in the array we will add to the listbox.
                for (var i in selectedData) {
                    var li_item = document.createElement("li");
                    $(li_item).html(selectedData[i])
                    $('#SelectedItems').append(li_item);
                }
            });
        });

            

html

             <div id="demo"></div>
            
Option Description
dataleft Array: The items to be displayed in the left side listbox.
dataright Array: The items to be displayed in the right side listbox.
size int: controls the height of the boxes.
leftLabel string: The label at the top of the left box.
rightLabel string: The label at the top of the right box.