Is Bootstrap Multiselect still viable?

by

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

My Menu Box

The Expected Menu Box

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?

  • it may depend on where that script is placed… debug and see if $(‘#campusMultiSelect’).multiselect… is being called. If any errors show in browser’s console, include those in your post. You might just remove the document ready check and be sure to place it at the bottom of the page. (You shouldn’t need to wait for document ready unless other scripts are running actions that change the DOM)

    – 

  • if you see error of something like: “$ is not defined”, you may need to put that script in a file and add it below your jquery.js <script> tag… ex: <script src=”/js/your_script.js”></script>

    – 

Leave a Comment