control <select> using separate <ul>

/*Downloaded from https://www.codeseek.co/vincentorback/control-andltselectandgt-using-separate-andltulandgt-WoKxwv */
.Select {
  margin: 50px;
}

.Select-list {
  
}

.Select-listItem {
  cursor: pointer;
}

.Select-listItem.is-active {
  color: red;
}

.Select-listItem[data-disabled="true"] {
  opacity: .6;
  pointer-events: none;
}



/* Use to hide the <select> element */

.u-hiddenVisually {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*Downloaded from https://www.codeseek.co/vincentorback/control-andltselectandgt-using-separate-andltulandgt-WoKxwv */
var selectEl = document.querySelector('.js-select');
var selectControlEl = selectEl.querySelector('.js-selectControl');

var selectListEl = void 0;
var selectListItems = void 0;

var selectListClass = 'Select-list';
var selectListItemClass = 'Select-listItem';
var activeClass = 'is-active';

/* Set active item */
function setActiveItem(value) {
  var activeControlItem = selectControlEl.options[selectControlEl.options.selectedIndex];
  value = value || activeControlItem.value;

  /* Remove active states from all list elements */
  if (activeControlItem) {
    activeControlItem.removeAttribute('selected');
  }

  Array.from(selectListItems).forEach(function (itemEl) {
    itemEl.classList.remove(activeClass);
  });

  /* Set active states */
  var activeListItem = selectListEl.querySelector('li[data-value="' + value + '"]');
  if (activeListItem) {
    activeListItem.classList.add(activeClass);
    selectControlEl.value = value;
    selectControlEl.querySelector('option[value="' + value + '"]').setAttribute('selected', true);
  }
}

/* Create a <ul>-list from <select>-element */
function createList() {
  selectListEl = stringToElements('<ul class="' + selectListClass + '"></ul>');

  Array.from(selectControlEl.options).forEach(function (option) {
    selectListEl.appendChild(stringToElements('<li\n        class="' + selectListItemClass + '"\n        data-value="' + option.value + '"\n        data-disabled="' + option.disabled + '"\n        tabindex="' + (option.disabled ? -1 : 0) + '"\n        >\n        ' + option.innerHTML + '\n      </li>'));
  });

  selectEl.appendChild(selectListEl);

  selectListItems = selectEl.querySelectorAll('li');

  setActiveItem();

  /* Listen for click on <ul>-items */
  Array.from(selectListItems).forEach(function (itemEl) {
    itemEl.addEventListener('click', function (e) {
      var targetEl = e.currentTarget || e.target;
      setActiveItem(targetEl.getAttribute('data-value'));
    }, false);
    itemEl.addEventListener('keydown', function (e) {
      if (e.keyCode === 13) {
        setActiveItem(e.target.getAttribute('data-value'));
      }
    }, false);
  });

  /* Listen for change in <select> */
  selectControlEl.addEventListener('change', function (e) {
    setActiveItem(e.currentTarget.value);
  });
}

/* Create list on load */
createList();

/* Helper function to create element from string */
function stringToElements(string) {
  var div = document.createElement('div');
  div.innerHTML = string;

  if (div.childNodes.length > 1) {
    return div.childNodes;
  }

  return div.firstChild;
}