How to implement multiple select in MVC 3 using 'chosen.js' plugin

Question

How to implement chosen plugin for MVC 3 ?

for this type of output

Answer 1

This is my code how to make chosen.js work with javascript/MVC

This is my code for my dropdown

@Html.DropDownListFor(m => m.CategoryId,
                                    new SelectList(Model.Categories, "Id", "Name"),
                                    "Choose a Category...",
                                    new
                                    {
                                        id = "CategoryId",
                                        multiple = "",
                                        @class = "chzn-select srs-select search-dropdown",
                                        data_placeholder = "Choose a Category..."
                                    })

Here I use 'chzn-select' styling

-- In the document ready, one should have the .chosen() function called.

$(document).ready(function () {

    $('.chzn-select').chosen();
});

In Javascript, to retrieve what was selected, this is the code

The code to retrieve items selected in the dropdownbox

var selectedCategoryId = $('Select#CategoryId').val();
    var selectedCategories = "";

    if (selectedCategoryId != null) {
        $.each(selectedCategoryId, function (index, value) {
            selectedCategories = selectedCategories + value + ",";
        });
    }

Basically selectedCategories has ID of the items selected, seperated by ','

To update the dropdown with the values selected

Copy your values into a array

var categoryArray = new Array(); 

... there is code that initializes the array whih the values that were selected before.

//code to make you selection, the array has your values.

$('Select#CategoryId').val(categoryArray);

$('.chzn-select').trigger('chosen:updated');

Hope this helps

Answer 2

I have reconfigure chosen plugin as below and working properly.

My razor :

<div style="width: 750px; clear: both; margin-left: 170px;">

            @Html.ListBox(
                             "Emailaddress",
                             ViewBag.EmailaddressList as MultiSelectList,
                             new { @class = "chosen-select", data_placeholder = "Choose a Emailaddress...", style = "width:750px;", tabindex = "4" }
                         )
</div> 

Add this script after your html Razor code

<script src="@Url.Content("~/Scripts/chosen.js/chosen.jquery.js")" type="text/javascript"></script>
        <script type="text/javascript">
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                '.chosen-select-width': { width: "95%" }
            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
  </script>

My viewbag :

ViewBag.Skills = new MultiSelectList(EmailaddressList, "Id", "EmailId");

Answer 3

please visit the following link.this will help you to implement chosen plugin with mvc3. i found this helpful for me.here is the link

http://utsavized.com/chosen-multiselect-dropdown-list-with-asp-net-mvc3/

Answer 4

I think you should use like this .

@Html.DropDownListFor(model => model.CountryId, new SelectList(Model.Countries, "ID", "Name"), "select", new { @ID = "ddlCountry", @class = "chosen-select", multiple = "multiple", Style = "width: 150px;" })

this will help you.