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 ?

This link has checkboxes with in the dropdownlist,i hope this link is best suitable for your question. wenzhixin.net.cn/p/multiple-select/#setselects-getselects — RamyaSree
– RamyaSree, Commented Oct 17, 2013 at 5:29

Coldrice · Accepted Answer · 2017-08-04 02:21:28Z

8

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

edited Aug 4, 2017 at 2:21

Coldrice

51 silver badge6 bronze badges

answered Sep 5, 2013 at 5:50

शेखर

17.6k14 gold badges64 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abbas Amiri · Accepted Answer · 2013-09-05 05:44:56Z

6

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

Download

answered Sep 5, 2013 at 5:44

Abbas Amiri

3,2241 gold badge27 silver badges25 bronze badges

Comments

PVivek · Accepted Answer · 2016-09-19 07:21:08Z

This tutorial shows complete step by step guide for creating multiselect dropdown with checkboxes in mvc Multiselect dropdown with checkboxes in MVC

You Need Select Tag

<select id="CustomerId" name="CopyFromCustomerId"></select>

or you can use Html.ListBoxFor

You need following script

$('#CustomerId').multiselect({
            includeSelectAllOption: true
        });

And below css and script files

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>     
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>

Collectives™ on Stack Overflow

Multiselect dropdown with checkbox in mvc4 razor

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related