JSFiddle - React, Tailwind, and code Playground

HTML

<select class="shortened-select" id="options">
  <option val="" style="display: none;" id="nonOption"></option>
  <option val="Open" data-descr="some description" selected></option>
  <option val="Closed" data-descr="a bunch of text" ></option>
</select>

JavaScript

function focus() {
  [].forEach.call(this.options, function(o) {
    if (o.id === 'nonOption'){
    	o.textContent =  document.getElementById('options').value;
      
    	o.selected = 'selected';
		}
    else
    {
    o.textContent = o.getAttribute('val');
    }
  });
}
function blur(e) {
  [].forEach.call(this.options, function(o) {
   if (o.selected === true && o.id === 'nonOption'){
    //selectedOption = o;
     o.selected = 'selected';
    }
    else
    {
     o.textContent = o.getAttribute('val') + ' - ' + o.getAttribute('data-descr');
     }
  });
 this.blur();
 }
 



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