JSFiddle - React, Tailwind, and code Playground

by jimkennelly

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi-Select Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3B4xPXHceueVMLwS-7+wT369X2K4t57+910C2319y260469244K304362q860H" crossorigin="anonymous">
</head>
<body>
  <form>
    <div class="mb-3">
      <label for="mySelect" class="form-label">Select your options:</label>
      <select class="form-select" id="mySelect" multiple>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
      </select>
    </div>
  </form>

  <script>
    const selectElement = document.getElementById("mySelect");
    const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);
    console.log(selectedValues);
  </script>
</body>
</html>