JSFiddle - React, Tailwind, and code Playground

HTML

<select id="myList" onchange="onChanged()" onblur="onChanged()" onclick="onClicked()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

JavaScript

var selectedIndex = -1;
function onChanged() {
  //once selected, replace verbose with terse forms
  var myList = document.getElementById("myList");
  selectedIndex = myList.selectedIndex;
  var optionArray = ["One|1", "Two|2", "Three|3"];
  myList.options.length = 0;
  for (var option in optionArray) {
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[1];
    newOption.innerHTML = pair[1];
    myList.options.add(newOption);
  }
  myList.selectedIndex = selectedIndex;
}

function onClicked() {
  var myList = document.getElementById("myList");
  var optionArray = ["1|One", "2|Two", "3|Three"];
  myList.options.length = 0;
  for (var option in optionArray) {
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[1];
    newOption.innerHTML = pair[1]; 
    myList.options.add(newOption);
  }
  if (selectedIndex > -1)
    myList.selectedIndex = selectedIndex;
}