限制选择下拉选项 - 角度

时间:2018-01-03 14:10:52

标签: css angular css3 angular5

选择标记是否有一种方法可以在下拉列表中显示有限数量的结果,然后滚动条如果还有更多?

这是我的代码:

   <select class="form-control" name="selectedOption" [(ngModel)]='selectedOption'>
        <option value="" [disabled]="true">Disabled</option>
        <option value="">All Options</option>
        <option *ngFor="let name of options" [ngValue]="name">{{name}}</option>
      </select>

我想首先显示8个结果,如果有更多,我想显示滚动条。 如果不能使用select标签,那么最好的方法是什么? div中的链接下拉,然后div上的溢出? 您对如何更好地解决这些问题有何建议?

感谢。

1 个答案:

答案 0 :(得分:1)

使用onmousedownonblur来处理选项限制

<select onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.blur()"  onblur="this.size=0;" class="form-control" name="selectedOption" [(ngModel)]='selectedOption'>
        <option value="" [disabled]="true">Disabled</option>
        <option value="">All Options</option>
        <option *ngFor="let name of options" [ngValue]="name">{{name}}</option>
</select>

Demo