Is Bootstrap Multiselect still viable?

Question

I'm trying to create a multiselect dropdown menu for toggling which campus information is visible and came across David Stutz's bootstrap plugin.

I called in my links and scripts:

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

I created my dropdown menu

<select id="campusMultiSelect"
        multiple="multiple">
    <option value="Campus1">Campus 1</option>
    <option value="Campus2">Campus 2</option>
    <option value="Campus3">Campus 3</option>
</select>

The id in the sections to be toggled

<div id="Campus1"
     class="rounded">
    // Campus 1 information goes here
</div>
// <div> for Campus 2 and 3 go here

And the javascript

<script type="text/javascript">
    $(function () {
        $('#campusMultiSelect').multiselect({
            includeSelectAllOption: true
        });

        $('#campusMultiSelect').change(function () {
            // Get the selected values
            var selectedValues = $(this).val();

            // Define an array of campus IDs to toggle
            var campusIDs = ['Campus1', 'Campus2', 'Campus3'];

            // Iterate through the campus IDs and toggle their visibility
            campusIDs.forEach(function (campusID) { 
                var showContent = selectedValues && 
                                  selectedValues.indexOf(campusID) !== -1;
                $('#' + campusID).toggle(showContent);
            });
        });
    });
</script>

However, when I run it, this is the box that I get as opposed to the one I'm supposed to get with selection boxes next to each option

I followed all of the instructions in the documentation on use, but obviously didn't get what I was expecting.

The code in the repository was last updated in 2022, so is this multiselect still compatible with current versions of Razor, ASP.NET Core, and C# or am I just making a very obvious mistake and forgot a semicolon or something?

Answer 1

You can check your bootstrap version in the browser's developer tools and check if there are any related error messages. Here are two methods you can choose:

1. If the bootstrap version you are using is V5, you can migrate to v4.

2. Or you can use the corresponding version of bootstrap, but you need to perform relevant initialization configuration on the Bootstrap Multiselect plug-in.

You can use it as a reference with bootstrap5.1.3:

<link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />

<select id="campusMultiSelect"
        multiple="multiple">
    <option value="Campus1">Campus 1</option>
    <option value="Campus2">Campus 2</option>
    <option value="Campus3">Campus 3</option>
</select>

<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="~/js/bootstrap-multiselect.js"></script>

@section scripts {

    <script src="~/lib/jquery/dist/jquery.js"></script>
  
    <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <script src="~/js/bootstrap-multiselect.js"></script>

    <script type="text/javascript">
        $(function () {
            $('#campusMultiSelect').multiselect({
                buttonClass: 'form-select',
                templates: {
                    button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
                }
            });


        });
    </script>
}

You can see the presentation of Multiselect：