_dropdown.scss

.dropdown {
  max-width: 100%;
  background: darken(#fff, 2%);
  display: block;
  width: 260px;
  font-size: 16px;
  line-height: 45px;
  position: relative;
  margin: 10px;

  &__active {
    box-sizing: border-box;
    padding: 0 0 0 20px;
    border-right: 3px solid $grey-light;
    border-bottom: 4px solid $grey-light;
    border-left: 1px solid $grey-light;
    border-top: 1px solid $grey-light;

    &:hover {
      cursor: pointer;
      border-bottom: 4px solid $purple;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid $grey-light;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    right: 0;
    background: white;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
  }

  &__item {
    box-sizing: border-box;
    width: 100%;
    display: block;
    list-style: none;
    font-size: 16px;
    line-height: 45px;
    margin: 0;
    padding: 0 0 0 20px;
    font-weight: 100;

    &:nth-child(2n+2) {
      background: #efefef;
    }

    &:hover {
      cursor: pointer;
      background: $purple-light;
    }
  }
}

.dropdown--visible {
  z-index: 20;
  .dropdown__list {
    height: auto;
  }
}

select.js

export default select;

const namespace = 'select';

function select() {
    const selects = document.querySelectorAll('.js-select');
    for(let i = 0; i < selects.length; i++) {
        newSelect(selects[i], 'select-'+i);
    }
}

function newSelect(element, id) {
    const select = document.createElement('div');

    select.classList = namespace;
    select.dataset.target = id;

    const optionContainer = document.createElement('ul');
    optionContainer.classList = namespace+'__list';

    for(let i=0; i<element.childNodes.length; i++) {
        const option = document.createElement('li');
        option.classList = namespace+'__item';
        option.innerHTML = element.childNodes[i].text;

        let value = element.childNodes[i].value;

        if (value.length > 0) {
            option.setAttribute('value', value);
        }

        if (i === 0) { // label
            const active = document.createElement('div');
            active.classList = namespace+'__active';

            active.innerHTML = element.childNodes[i].text;
            if (value.length > 0) {
                active.setAttribute('value', value);
            }
            select.appendChild(active);
        }

        optionContainer.appendChild(option);
    }

    select.appendChild(optionContainer);
    element.classList.add('hidden');
    element.classList.add(id);
    element.setAttribute('hidden', 'true');
    element.parentNode.insertBefore(select, element);
    select.addEventListener('click', selectActions);
}


function selectActions(evt) {
    const target = evt.target;
    const classes = target.classList[0];

    if (classes.indexOf('item') > -1) { // is item
        const daddy = target.parentNode.parentNode;
        daddy.classList.toggle(namespace+'--visible');
        setActive(daddy, target);
    }

    if (classes.indexOf('active') > -1) { // active
        const daddy = target.parentNode;
        daddy.classList.toggle(namespace+'--visible');
    }
}

function setActive(select, item) {
    const val = item.getAttribute('value');
    const actualSelect = document.querySelector('.'+select.dataset.target);
    
    actualSelect.setAttribute('value', val);

    for(let i=0; i<actualSelect.options.length; i++) {
        if(actualSelect.options[i].value == val) {
            actualSelect.selectedIndex = i;
            return;
        }
    }

    select.childNodes[0].innerHTML = item.innerHTML;
}