JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<select id="fff" multiple>
  <option selected>T</option>
  <option selected>T</option>
  <option selected>T</option>
  <option selected>T</option>
  <option selected>T</option>
  <option selected>T</option>
  <option selected>T</option>
  <option selected>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>T</option>
  <option>bottom one</option>
  
</select>

CSS

select {
  width: 130px;
  height: 150px;
}

JavaScript

const options = Array.from(document.querySelectorAll('#fff option'))
const sel = options.map(el => el.selected)

$('#fff option').mouseup(function({
  target
}) {
  const {
    index
  } = target

  sel[index] = !sel[index]

});

$('#fff').on('input', () => {


  for (const [i, option] of options.entries()) {
    option.selected = sel[i]
  }

})