Bootstrap - Select Part 3: Multiple Select Dropdowns

What is a Multiple Select Dropdown?

A multiple select dropdown allows users to select more than one option at a time.

Example 3: Multi-Select Dropdown

<div class="form-group">

    <label for="multiSelect">Select Multiple Options</label>

    <select class="form-select" id="multiSelect" multiple>

        <option value="1">Apple</option>

        <option value="2">Banana</option>

        <option value="3">Cherry</option>

        <option value="4">Grapes</option>

    </select>

</div>

Explanation:

The multiple attribute allows selecting multiple values.

Users can hold Ctrl (Windows) or Command (Mac) to select multiple options.

Useful for categories, interests, or multi-choice selections.

Example 4: Limiting the Number of Selections

You can use JavaScript to limit selections:

<script>

    document.getElementById("multiSelect").addEventListener("change", function() {

        let selectedOptions = Array.from(this.selectedOptions);

        if (selectedOptions.length > 2) {

            alert("You can select only 2 options!");

            selectedOptions[selectedOptions.length - 1].selected = false;

        }

    });

</script>

This ensures that users cannot select more than 2 options.