JSFiddle - React, Tailwind, and code Playground

HTML

<select class="shortened-select">
  <option value=""></option>
  <option value="Open" data-descr="some description" selected></option>
  <option value="Closed" data-descr="a bunch of text"></option>
</select>

JavaScript

function focus() {
  [].forEach.call(this.options, function(o) {
    if (o.value === ""){o.selected = 'selected';
    o.style = 'display:none;'}
    else
    {
    o.textContent = o.getAttribute('value') + ' (' + o.getAttribute('data-descr') + ')';
    }
  });
}
function blur(e) {
  [].forEach.call(this.options, function(o) {
    o.textContent = o.getAttribute('value');
  });
 this.blur();
 }


[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
  s.addEventListener('focus', focus);
  s.addEventListener('change', blur);
  blur.call(s);
});