select multiple

by Gabriel

HTML

<select id="#countrySelect" size="10" multiple>
  <option value="argentina">Argentina</option>
  <option value="bolivia">Bolivia</option>
  <option value="brasil">Brasil</option>
  <option value="chile">Chile</option>
  <option value="colombia">Colombia</option>
  <option value="ecuador">Ecuador</option>
  <option value="paraguay">Paraguay</option>
  <option value="perú">Perú</option>
  <option value="uruguay">Uruguay</option>
  <option value="venezuela">Venezuela</option>
</select>

JavaScript

var countrySelect = document.getElementById("#countrySelect");

countrySelect.addEventListener("mousedown", function(event) {
  event.preventDefault();

  var scrollTop = countrySelect.scrollTop;
  event.target.selected = !event.target.selected;
  setTimeout(function() {
    countrySelect.scrollTop = scrollTop;
  });
  countrySelect.focus();
});

countrySelect.addEventListener("mousemove", function(event) {
  event.preventDefault();
});