时间戳

首页 > 解决方案 > 用新元素刷新下拉列表后，它会以垂直滚动方式显示

javascript - 用新元素刷新下拉列表后，它会以垂直滚动方式显示

问题描述

我有一个最初有一个元素的下拉列表。

<select (click)="loadStuff()">
  <option value="DEFAULT_ELEMENT">DEFAULT</option>
  <option *ngFor="let e of elements" [ngValue]="e">{{ e }}</option>
</select>

下拉列表有一个click事件，如果尚未加载，则加载下拉元素：


  public elements = [];

  loadStuff() {
    if (!this.elements.length) {
      setTimeout(() => {
        for (let i=0; i < 10; i++) {
          this.elements.push('element ' + i)
        }
      }, 1000)
    }
  }

现在我的问题是：当我单击下拉菜单本身时，它最初具有预期的一个元素：

在此处输入图像描述

但是在加载元素后（当下拉菜单仍然打开时）它会为元素添加一个滚动条：

在此处输入图像描述

然后，我需要单击并返回以使列表正确显示：

在此处输入图像描述

这是一个展示问题的工作 Angular 版本：https ://stackblitz.com/edit/angular-ivy-pgyd1q

使用同样的行为：http jQuery: //jsfiddle.net/6j7a3sxn/

我怎样才能防止这种情况发生？

标签： javascripthtmlcss

解决方案

只需不要在 HTMLSelectElement 单击上获取数据...在 ngOnInit 或解析器中执行。或者不要使用本机选择控件:)

推荐阅读