How do I create dropdown with checkbox by bootstrap multiselect?

Question

I am working on MVC 5, there is have

  @Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control " })

I want to do bootstrap multiselect dropdown with checkbox. For, I have tried:

<script src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />

<script type="text/javascript">
    $(function () {
        $('[id*=DDLServiceCate]').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

But after implementing this, look like below image.

But actually I want look like below image showing.

How can I do this ?

Nitheesh · Accepted Answer · 2021-12-14 08:22:06Z

3

You can use this plugin.

Multiple Select (MultiSelect)

This is the working fiddle.

Here is a working sample

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#lstFruits').multiselect({
            includeSelectAllOption: true
        });

        $('#btnSelected').click(function () {
            var selected = $("#lstFruits option:selected");
            var message = "";
            selected.each(function () {
                message += $(this).text() + " " + $(this).val() + "\n";
            });
            alert(message);
        });
    });
</script>

<body>
    <select id="lstFruits" multiple="multiple">
        <option value="1">Mango</option>
        <option value="2">Apple</option>
        <option value="3">Banana</option>
        <option value="4">Guava</option>
        <option value="5">Orange</option>
    </select>
    <input type="button" id="btnSelected" value="Get Selected" />
</body>

</html>

edited Dec 14, 2021 at 8:22

answered Mar 24, 2017 at 4:55

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

4 Comments

AbhiJA Over a year ago

still showing dropdownlist with radio button. I am using drowpdownlistfor.

AbhiJA Over a year ago

Here, I have posted all code. But after using this code showing error on browser console. Error: 'Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3'

Deepa MG Over a year ago

Note: It is very important to set the multiple property to multiple otherwise instead of CheckBoxes you will see RadioButtons after the plugin is applied. Reference [jqueryfaqs.com/Articles/… (Multiple Select (MultiSelect) DropDownList with CheckBoxes using jQuery) .

Deepa MG Over a year ago

@AbhiJA you should update your jquery library version to latest 3.3.1. [ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js] (jquery3.3.1)

AbhiJA · Accepted Answer · 2017-03-24 10:22:28Z

1

I have done,

<script src="~/Scripts/bootstrap-multiselect.js"></script>  
    <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />  
  
<script type="text/javascript">  
  $(function () {  
        $('[id*=DDLServiceCate]').multiselect({  
            includeSelectAllOption: true, buttonWidth: '200px'  
        });  
    });  
</script>

And Inside drowpdown I have added '@multiple = "multiple"'

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { @id = "DDLServiceCate", @class = "form-control", @multiple = "multiple" })

Now showing checkboxes inside drowpdownlistfor.

answered Mar 24, 2017 at 10:22

AbhiJA

3411 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

How do I create dropdown with checkbox by bootstrap multiselect?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related