Ограничить варианты раскрывающегося списка выбора - угловой

Есть ли способ, чтобы тег выбора имел ограниченное количество результатов для отображения в раскрывающемся списке, а затем полосу прокрутки, если их больше?

Это мой код:

   <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? Каковы ваши предложения относительно того, как лучше решить эти проблемы?

Спасибо.


angular css angular5
person Community    schedule 03.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте onmousedown вместе с onblur для управления ограничением параметров

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

Демо

person Sachila Ranawaka    schedule 03.01.2018