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

Objective

Sometimes, we want users to be able make multiple selections in a combo box (drop down list). This JQuery control does that.

Screen shots




Implementation

The control is dynamic, generated using JQuery/javascript.

The control is a class called MultiSelectComboBox which has three prototype functions.

Prototype	Parameters	Use
list	id - the id of the created control	Returns a list of Text/Value pairs (2 dimensional array) of all items in the combo box
val	id - the id of the created control	Returns a list of Text/Value pairs (2 dimensional array) of all selected items in the combo box
create	id - the id of the control data - an array of Text/Value pairs or a JSON list object of items to create the check boxes. width - the width (in pixel) of the control height - the height (in pixel) of the control. -1 is for no height constraint. isJsonListObject - Boolean value to indicate if the data is a JSON list object. TextProperty - property of the JSON object which is the displayed Text. ValueProperty - property of the JSON object which is the Value.	Creates the control

The UI of the control is generated dynamically using javascript createElement method. setAttribute is also used extensively in the UI creation.

For e.g..

button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', '...');
button.setAttribute('v-align', 'middle');
button.setAttribute('align', 'center');
//Does not work in some versions of IE.
//button.setAttribute('style', 'width:' + buttonWidth.toString() + 'px;');
button.style.width = buttonWidth.toString() + 'px';
button.setAttribute('tag', listContainerId);

Note: You can create custom styles for the button in the UI, if you want.
Note: In the earlier version of the control, setAttribute on 'style' was used which does not work in some versions of IE. So, I have changed the control to use for eg. element.style.width (which works cross-browsers) in the dynamic generation. You can download this version for this change.

The data for the control is a 2 dimensional array of Text/Value pair OR a JSON list object. The Text is what is displayed against the checkbox and Value is the internal identifier of the item.

E.g.. of 2 dim array :

[['All', '0'], ['Mechanical', '1'], ['Electical', '2'], ['Electronic', '3'], ['Computer', '4']];

The val() function returns a two dimensional array of Text/Value pairs of selected items.

Usage

In the example below, the data to the create method (topics) is a JSON list object.

In ASP .Net MVC, create an action method in the Controller. For eg. GetTopics() in the Home controller. This method returns a JSON list (the list may come from a database or some data source).

public class Topic
{
    public string TopicId { get; set; }
    public string TopicName { get; set; }
    public string TopicSubject { get; set; }
}

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.