在鼠标滚轮滚动时更改选择输入中的选定项目

Posted 2023-05-08

【中文标题】在鼠标滚轮滚动时更改选择输入中的选定项目

【英文标题】：Change the selected item in select input on mouse wheel scrolling

【发布时间】：2019-01-09 21:22:23

【问题描述】：

我正在使用 Bootstrap 自定义表单选择输入供用户选择国家/地区。 我的问题是我必须在滚动鼠标滚轮时将下拉菜单中的选择项更改为下一项。

Fiddle Link

我的代码

    <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>

【问题讨论】：

您的链接无效。即使剥离，它也不起作用。

请等我更新

小提琴链接无效。

请检查我更新了它

你的问题是什么？

【参考方案1】：

您可以检查焦点，如果没有更改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);
    
);

<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>

【讨论】：

谢谢。这是仅使用 CSS 还是通过 bootstrap 完成的？

应该是this.length-1 而不是this.length