Multiselect dropdown with checkbox in mvc4 razor

Question

I am working on MVC4 project where i have a multi select dropdown

@Html.DropDownList("year_selected", (SelectList)(ViewData["YearSelected"]), new { tabindex = "14", multiple = "multiple", style = "width:150px;height:200px;" })

Its populated with list of years i have mentioned in controller

int minYear =Int32.Parse(Helper.MinYear);
int maxYear = Int32.Parse(Helper.MaxYear);
var yearSelectedList = new List<SelectListItem>();
for (int count = minYear; count <= maxYear; count++)
{
    yearSelectedList.Add(new SelectListItem()
    {
        Text = count.ToString(),
        Value = count.ToString()
        });
    }
    var yearselectlist = new SelectList(yearSelectedList, "Value", "Text");
    ViewData["YearSelected"] = yearselectlist;

and on dropdown click i am calling jquery to select that particular value and also when page is loaded i checking values saved in database by making them select by default

Here is jquery code to selected the values which are saved in database

if (str_year_selected.val() != "") {
    var yeararray = str_year_selected.val().split(",");
    for (var i in yeararray) {
         var val = yeararray[i];
         year_selected.find('option:[value=' + val + ']').attr('selected', 1);
    }
}

and here is code i am using to select the value when user clicks or press ctrl key on dropdown values

year_selected.change(function () {
     var selectedyears = "";
     $("#year_selected :selected").each(function (i) {
        if (i != 0) {
            selectedyears += ",";
        }
         selectedyears += $(this).text();
     });
     str_year_selected.val(selectedyears);
});

Everything is working perfect . but now problem is user wants checkbox inside of dropdown so that can check the option.

How do i do this ?

Answer 1

Rather than using dropdown you can use checkbox in div with css. It will fell like it is a dropdown list with checkbox.

Here is good link of jquery

http://www.erichynds.com/blog/jquery-ui-multiselect-widget