Dropdownlist with Checkboxes

There are situations where you might want to allow users to select multiple options simultaneously in the dropdown box. In such cases, a dropdown list with checkboxes can be a valuable addition to your web application. So, in this article, we’ll see how to create a dropdownlist with checkboxes and how to display selected options.

Need for Dropdowns with Checkboxes

By creating dropdowns with checkboxes, users don’t need to scroll through and make individual selections when they have to select multiple options from a long list. And it manages multiple selections, making them a valuable addition to web forms, filtering mechanisms, and search options. So, you can create

Creating a drop-down list with checkboxes

To implement a dropdown list with checkboxes, we will combine HTML, CSS, and JavaScript. We can display the options selected by users using javascript as soon as they are selected. Let’s see an example:

Example1

HTML:

<div class="dropdown">
   <p>Choose the front-end languages you know:</p>
    <button>Select Languages</button>
    <div class="dropdown-content">
      <label>
        <input type="checkbox" name="option" value="HTML"> HTML
      </label>
      <label>
        <input type="checkbox" name="option" value="CSS"> CSS
      </label>
      <label>
        <input type="checkbox" name="option" value="JavaScript"> JavaScript
      </label>
      <label>
        <input type="checkbox" name="option" value="ReactJs"> ReactJs
      </label>
      <label>
        <input type="checkbox" name="option" value="Angular"> Angular
      </label>
    </div>
  </div>

Steps:

In this HTML code, we have created the <div> with the class name “dropdown“.
Inside the container, we have an <button> element for toggling the dropdown and an <div> element with the class name “dropdown-content” to hold the checkboxes.
And inside the child <div>, we have created a <input> checkbox with options.

CSS:

We use CSS to position the dropdown and style it accordingly.

.dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 150px;
      border: 1px solid #ddd;
      padding: 10px;
      z-index: 1;
    }
    
    .dropdown-content label {
      display: block;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }

JS:

The JavaScript code handles the dropdown behavior and retrieves the selected options when checkboxes are checked or unchecked.

const dropdown = document.querySelector('.dropdown');
const checkboxes = document.querySelectorAll('.dropdown-content input[type="checkbox"]');
const button = document.querySelector('.dropdown button');
    
    button.addEventListener('click', function() {
      dropdown.classList.toggle('open');
    });
    
    checkboxes.forEach(function(checkbox) {
      checkbox.addEventListener('change', function() {
        const selectedOptions = Array.from(checkboxes)
          .filter(function(cb) {
            return cb.checked;
          })
          .map(function(cb) {
            return cb.value;
          });
        
        button.textContent = selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select Languages';
      });
    });

Steps:

In this above JS code, we select the main dropdown container with the class, .checkboxes within the dropdown content, and button elements inside the dropdown using document.querySelector
Then we add a click event listener to the button element. When the button is clicked, it toggles the open class on the dropdown container.
We iterate over each checkbox using the forEach method. For each checkbox, we add a change event listener. When a checkbox’s state changes (checked or unchecked), it triggers the event listener.
Then, we use the filter method to keep only the checked checkboxes. Next, we use the map method to extract the values of the checked checkboxes.
Finally, we update the text content of the button element based on the selected options. If there are selected options, we set the button text to the joined string of selected options using join(', '). If no options are selected, we set the button text to ‘Select Languages’.