Dual listboxes in jquery

Ok, so this one should be simple, more for reference. The goal is to create a dual list box using jQuery and MVC. To accomplish this, we are going to use the “appendTo” manipulation (http://docs.jquery.com/Manipulation). You can also download the dual listbox code sample here.

Add two select boxes, and four buttons

<table border="0">
<tr>
<td valign="top" align="left">
<%= Html.ListBox("AvailableCategories", null, new { @size = "8", @style = "width:200px" })%>
</td>

<td valign="middle" align="center">
<input id="btnAdd" type="button" value=" > " onclick="add();" /><br />
<input id="btnAddAll" type="button" value=" >> " onclick="addall();" /><br />
<input id="btnRemove" type="button" value=" < "  onclick="remove();" /><br />
<input id="btnRemoveAll"type="button" value=" << "  onclick="removeall();" />
</td>

<td valign="top" align="left">
<%= Html.ListBox("SelectedCategories", null, new { @size = "8", @style = "width:200px" })%>
</td>
</tr>
</table>

Add javascript handlers for the button clicks

<script language="javascript" type="text/javascript">
function add() {
$("#AvailableCategories option:selected").appendTo("#SelectedCategories");
}

function addall() {
$("#AvailableCategories option").appendTo("#SelectedCategories");
}

function remove() {
$("#SelectedCategories option:selected").appendTo("#AvailableCategories");
}

function removeall() {
$("#SelectedCategories option").appendTo("#AvailableCategories");
}
</script>

Generate listbox items in Controller

The AvailableCategories and SelectedCategories collections are populated in the controller using ViewData:

public ActionResult Index()
{
Category[] AvailableCategories = Category.FindAvailable();
Category[] SelectedCategories = Category.FindSelected();

ViewData["AvailableCategories"] = new SelectList(AvailableCategories,"CategoryID","Category");
ViewData["SelectedCategories"] = new SelectList(SelectedCategories,"CategoryID","Category");

return View();
}

That’s it!