This is a very basic list box.
$(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);
}
});
});
<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. |