JQuery/JSON Multi-Select Combo Box (drop down list) Control

public JsonResult GetTopics()
{
List<Topic> lstTopics = new List<Topic>();

lstTopics.Add(new Topic { TopicId = "0", TopicName = "Mechanical", TopicSubject = "Mech Engg." });
lstTopics.Add(new Topic { TopicId = "1", TopicName = "Electrical", TopicSubject = "Elec Engg." });
lstTopics.Add(new Topic { TopicId = "2", TopicName = "Electronic", TopicSubject = "Elect Engg." });
lstTopics.Add(new Topic { TopicId = "3", TopicName = "Computers", TopicSubject = "Comp Engg." });

return Json(lstTopics, JsonRequestBehavior.AllowGet);
}

In the page create a container (div) to place the combo-box. This is the combobox container.

<table>
<tr>
<td>
<div id="comboboxContainer">JQuery multi-select combo box</div>
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
<tr>
<td>
<input id="Submit" value="Submit" type="button" />
</td>
</tr>
</table>

Then, in script, make a JSON call to fetch the data. In the call back, pass the returned JSON list object to the create() API and also hook up the created control to the div. TopicName is the TextProperty and TopicId is the ValueProperty of the combo box.

Also, wire up the click event of the Submit button to display the selected items.

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-MultiSelectComboBox1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {

$("#Submit").click(function () {
$.each(new MultiSelectComboBox().val("topicsList"), function (iteration, item) {
alert(item[0] + " (" + item[1] + ')');
});
});

$.post("/Home/GetTopics", function (topics) {
var comboBox = new MultiSelectComboBox().create("topicsList", topics, 160, 60, true, 'TopicName', 'TopicId');

var contentBlock = document.getElementById('comboboxContainer');
contentBlock.appendChild(comboBox);
});
});
</script>

When you click the Submit button the val() API is called and an array of selected items is returned and displayed.

The source code is available as a free download. You can modify the control to suit your needs.

Note: The control has been tested on ASP .NET MVC 2.0 and 3.0.