JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<button id="btnPrev">Prev option</button>

<select id="foo">
<option value="alpha">1</option>
<option value="beta">2</option>
<option value="delta">3</option>
</select>

<button id="btnNext">Next option</button>

JavaScript

var selectElm = document.getElementById('foo');
var btnPrev = document.getElementById('btnPrev');
var btnNext = document.getElementById('btnNext');

btnPrev.addEventListener('click', changeOption.bind(btnPrev, 'prev'));
btnNext.addEventListener('click', changeOption.bind(btnNext, 'next'));

function changeOption(direction) {
  var options = selectElm.children;
  var optionsEndIndex = options.length-1;
  var currentOptionIndex = selectElm.selectedIndex;

  if (direction === 'next') {
    if (currentOptionIndex !== optionsEndIndex) {
      selectElm.selectedIndex++;
    } else {
      selectElm.selectedIndex = 0;
    }
  } else {
    if (currentOptionIndex !== 0) {
      selectElm.selectedIndex--;
    } else {
      selectElm.selectedIndex = optionsEndIndex;
    }
  }
}