css - Is there any way to dynamically expand the size of a drop-down box?

Question

1. Use angular to dynamically obtain address information and automatically generate an address drop-down list:
The code is as follows:

<select name="graduated_province" ng-model="graduated_province" ng-options="pro.area_id as pro.area_name for pro in province" ng-change="areaChoose('city')">
    <option value="" label="请选择" selected="selected">请选择</option>
</select>
<select name="graduated_city" ng-model="graduated_city" ng-options="city.area_id as city.area_name for city in city" ng-change="areaChoose('district')">
    <option value="" label="请选择" selected="selected">请选择</option>
</select>
<select name="graduated_district" ng-model="graduated_district" ng-options="dist.area_id as dist.area_name for dist in district">
    <option value="" label="请选择" selected="selected" >请选择</option>
</select>

The effect is as follows:

Then the problem comes, because the address data is obtained through ajax and then the list is generated by angular, so in

In such a network situation, if you click on the drop-down box to be generated before generating the drop-down box, a situation like this will appear:

.

So I would like to ask if there is any way to dynamically expand the size of the drop-down box?

Answer 1

The simplest thing is to recommend you to use custom components. Simulate a drop-down list.

Try setting a minimum height

Answer 2

It is best to attach the data of the default items of the first level select when the page is loaded.

Answer 3

Has the original poster solved it? urgent need! ! ! !