How to get and set multiple checkbox values based on serverside data using bootstrap multiselect plugin

Question

Here I have dropdownlist which contains multiple values. and user can select any no of values by clicking the checkbox infront of the value as shown below.

Following is my c# code.

@Html.DropDownList(m => m.Detail, new SelectList(ViewBag.detailList, "Value", "Text"), new { id = "det" , multiple= "multiple"})

$(document).ready(function() {
    $('#det').multiselect();
});

When user click save button I want to get the user selected list. I am using following code to get the values.

$("#det").val()

But the above value is empty. How to get the existing selected value?

And also I want to show the values as selected based on server side values. I am creating model and set model property with hardcoded values as below.

model.Detail = "Cheese, Tomatoes";

But these values are not getting selected in dropdownlist as well.

Used plugin here - link Any help?

Thanks.

Your `Detail` property needs to be `IEnumerable`, not `string` and if your generating options with values "Cheese" and "Tomatoes", then you set `model.Detail = new List{ "Cheese", "Tomatoes" };` — , Aug 25 '17 at 11:33
And if `ViewBag.detailList` is already `IEnumerable` it is just pointless to create another identical one using `new SelectList(ViewBag.detailList, "Value", "Text")` — , Aug 25 '17 at 11:34
And use `ListBoxFor()` not `DropDownListFor()` to generate a multiple select. — , Aug 25 '17 at 11:39

adiga · Answer 1 · 2017-08-25T10:58:11.170

1

You need to add multiple= "multiple" in the attributes for multiselect to work.

@Html.DropDownList(m => m.Detail, new SelectList(ViewBag.detailList, "Value", "Text"), 
         new { id = "det", multiple= "multiple" });

to set the values:

<script>
    var selectedValues = @model.Detail;

    var dataarray = selectedValues.split(",");

    // Set the value
    $("#det").val(dataarray);
    $("#det").multiselect("refresh");
</script>

edited Aug 25 '17 at 10:58

answered Aug 25 '17 at 10:51

adiga

34,372
9
61
83

Its working correctly. What I want to find is how can I send multi value from server and selected them on client side based on server side values. – Kate Fernando Aug 25 '17 at 10:53
i was just typing that :). Updated the answer – adiga Aug 25 '17 at 10:55
But I think you have combined both razor code as well as jquery. I can't used my selected values in jquery side since I am getting selected values in razor. Am I correct? – Kate Fernando Aug 25 '17 at 10:57
Razor ultimately compiles cshtml into html. The above code would look like `var selectedValues = "Cheese, Tomatoes"` in the browser. Now, you want to bind the values in your `model.Detail` property to the dropdown. So you need to get the value to a javascript variable. – adiga Aug 25 '17 at 11:07
**DO NOT** use `DropDownList()` to create a multiple select, use `ListBoxFor()` (refer [this answer](https://stackoverflow.com/questions/40725358/why-does-the-dropdownlistfor-lose-the-multiple-selection-after-submit-but-the-li/40732481#40732481)) – Aug 25 '17 at 11:30

score 1 · Answer 2 · answered Aug 26 '17 at 06:28

First of all, use @Html.ListBoxFor that works best with Multiselect js.

In order to get the values for selected options, I have created the following client side code which returns list of value in form of String arrays

function GetDropDownVal() {
        var selectidList = [];
        var selectedItem = $("#ListQueCatId").val();
 // .multiselect("getChecked") can also be used.
        if (selectedItem != null) {
            for (var i = 0; i < selectedItem.length; i++) {
                selectidList.push(selectedItem[i]);
            }
        }
        return selectidList;
    }

This is how I have implemented the code View Side Code

 @Html.ListBoxFor(m => m.ListQueCatId, (SelectList)ViewBag.AllQueCat as MultiSelectList, new { @class = "form-control listQueCatIdDdl" })

Javascript Code

 $(".listQueCatIdDdl").multiselect({ noneSelectedText: "--Select Category(s)--" });

Also, make sure to bind a model property of Type List in my case, ListQueCatId is List< Guid>, hence while you post the form, you will get the selected values in your model.

Also, I don't think there is need to add multiple attribute as the plugin is meant for selecting multiple values.

`var selectedItem = $("#ListQueCatId").val();` already is an array of the selected option values. To create another identical array is utterly pointless — , Aug 27 '17 at 00:26

How to get and set multiple checkbox values based on serverside data using bootstrap multiselect plugin

2 Answers2