Multi-Select Dropdown for Bootstrap 5 – select-checklist

select-checklist-bootstrap is a tiny Bootstrap plugin that transforms a standard HTML multi-select element into a user-friendly dropdown with checkboxes integrated.

The original multi-select element remains functional behind the scenes and preserves all form validation and submission behavior.

How to use it:

1. Include the select-checklist-bootstrap plugin after loading Bootstrap’s CSS and JavaScript files:

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<script src="/path/to/select-checklist.js"></script>

2. Add the select-checklist class to any <select multiple> element you want to transform. The script will automatically find and enhance it when the page loads.

<select multiple class="form-select select-checklist" id="skills" name="skills[]">
  <option value="javascript" selected>JavaScript</option>
  <option value="python" selected>Python</option>
  <option value="java">Java</option>
  <option value="csharp">C#</option>
  <option value="php">PHP</option>
  ...
</select>

3. You can also manually initialize specific elements:

// Initialize all elements with the class
initSelectChecklist();
// Initialize specific selector
initSelectChecklist('.custom-select-class');

4. Available configuration options.

• Dropdown Height: Default max-height is 300px with automatic scrolling
• Z-Index: Dropdown appears at z-index 1000 for proper layering
• Button Text: Displays “Seçiniz” (Select) when empty, “X seçili” (X selected) when items are chosen
• Styling: Inherits Bootstrap form-select classes for consistent appearance

How it works:

select-checklist-bootstrap hides the original <select> element using style.display = 'none'. The element remains in the DOM, which is critical because it continues to store the form’s state. This is how it maintains compatibility with native form submission.

The script then constructs a new set of DOM elements to serve as the UI: a div styled like a Bootstrap form-select acts as the dropdown button, and another div serves as the dropdown menu that contains the checkboxes.

select-checklist-bootstrap iterates over each <option> from the original, hidden select. For each option, it creates a <label> and an <input type="checkbox">, appending them to the menu div. An event listener is attached to each checkbox. When a checkbox’s state changes, the listener updates the selected property of the corresponding <option> in the original <select> element. This is the core mechanism that keeps the UI and the form data in sync.

A helper function, updateButtonText, counts the number of selected options and updates the button’s text to give the user feedback, for example, “2 selected”. Finally, event listeners on the button handle toggling the menu’s visibility, and a global click listener closes the menu if the user clicks anywhere outside of it.