Mahajan344 Mahajan344 - 6 months ago 224
jQuery Question

Multiselect dropdown with checkbox in mvc4 razor

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();

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 ?


user wants checkbox inside of dropdown so that can check the option.

There is a fantastic JQuery Plugin called Dropdown Check List that transforms a regular select HTML element into a dropdown checkbox list.

enter image description here