Creating a multi-select dropdown in JavaScript

Abhishek Pratap Singh October 03, 2023

Creating a multi-select dropdown in JavaScript typically involves manipulating the DOM (Document Object Model) to create a dropdown element that allows users to select multiple options. Here's a simple example of how you can create a multi-select dropdown using HTML, CSS, and JavaScript:

multi-select dropdown


<!DOCTYPE html>
<html>
<head>
  <title>Multi-Select Dropdown</title>
  <style>
    /* Style for the dropdown container */
    .dropdown-container {
      position: relative;
      display: inline-block;
    }

    /* Style for the dropdown button */
    .dropdown-button {
      background-color: #3498db;
      color: #fff;
      padding: 10px;
      border: none;
      cursor: pointer;
    }

    /* Style for the dropdown content */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 200px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Style for the dropdown options */
    .dropdown-option {
      padding: 10px;
      cursor: pointer;
    }

    /* Style for selected options */
    .selected {
      background-color: #3498db;
      color: #fff;
    }
  </style>
</head>
<body>

<div class="dropdown-container">
  <button class="dropdown-button" onclick="toggleDropdown()">Select Options</button>
  <div class="dropdown-content" id="dropdown">
    <div class="dropdown-option" onclick="selectOption(this)">Option 1</div>
    <div class="dropdown-option" onclick="selectOption(this)">Option 2</div>
    <div class="dropdown-option" onclick="selectOption(this)">Option 3</div>
    <div class="dropdown-option" onclick="selectOption(this)">Option 4</div>
  </div>
</div>

<script>
  // Toggle the dropdown visibility
  function toggleDropdown() {
    var dropdown = document.getElementById("dropdown");
    dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
  }

  // Handle option selection
  function selectOption(option) {
    option.classList.toggle("selected");
  }
</script>

</body>
</html>

In this example:

  1. We create a button that acts as the dropdown trigger.
  2. The dropdown content is initially hidden (display: none), and it becomes visible when the button is clicked.
  3. When a user clicks on an option in the dropdown, the selectOption function is called, which toggles the "selected" class on the clicked option to visually indicate selection.

You can further enhance this example by adding JavaScript logic to handle the selected options and perform actions based on the user's selections. Additionally, you can use more advanced libraries like jQuery or specialized dropdown libraries to simplify the implementation of multi-select dropdowns.

https://www.facebook.com/APSingh007
https://www.youtube.com/@apsingh007

Abhishek Pratap Singh

Posted by Abhishek Pratap Singh

Post a Comment

1 Comments