JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<label for="pets">Choose your pets:</label>
<br><br>
<select id="pets" multiple="multiple">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="rabbit">Rabbit</option>
  <option value="parrot">Parrot</option>
</select>
<br><br>
<button id="submit">Get Selected Values</button>

CSS

label {
  font-size: 1rem;
  font-family: sans-serif;
  padding-right: 10px;
}

button,
select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

JavaScript

document.getElementById('submit').onclick = function() {
  var select = document.getElementById('pets');
  var selected = [...select.options]
                    .filter(option => option.selected)
                    .map(option => option.value);
  alert(selected);
}