Change the selected item in select input on mouse wheel scrolling

Issue

I am using Bootstrap custom form select input for the users to select country. My problem is I have to change the select item in the drop to next item while i scroll the mouse wheel.

Fiddle Link

My code

    <select id="inputCountry" class="custom-select">
            <option>Country...</option>
            <option>Afghanistan</option>
            <option>Albania</option>
            <option>Algeria</option>
            <option>American Samoa</option>
            <option>Andorra</option>
            <option>Angola</option>
            <option>Anguilla</option>
            <option>Antigua &amp; Barbuda</option>
            <option>Argentina</option>
            <option>Armenia</option>
            <option>Aruba</option>
            <option>Australia</option>
            <option>Austria</option>
            <option>Azerbaijan</option>
            <option>Bahamas</option>
            <option>Bahrain</option>
            <option>Bangladesh</option>
            <option>Barbados</option>
</select>

Solution

You could check the focus and if not change selectedIndex.

document.getElementById('inputCountry').addEventListener('wheel', function(e) {
    if (this.hasFocus) {
        return;
    }
    if (e.deltaY < 0) {
        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
    }
    if (e.deltaY > 0) {
        this.selectedIndex = Math.min(this.selectedIndex + 1, this.length - 1);
    }
});

<select id="inputCountry" class="custom-select">
  <option>Country...</option>
  <option>Afghanistan</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antigua &amp; Barbuda</option>
  <option>Argentina</option>
  <option>Armenia</option>
  <option>Aruba</option>
  <option>Australia</option>
  <option>Austria</option>
  <option>Azerbaijan</option>
  <option>Bahamas</option>
  <option>Bahrain</option>
  <option>Bangladesh</option>
  <option>Barbados</option>
</select>

Answered By - Nina Scholz