我如何使用bootstrap4限制下拉菜单的选定项

我的drowpdown出现问题,我无法自定义选定的项目,我尝试搜索如何通过未找到解决方案来限制下拉列表的选择。 因此,我有20个项目要显示在下拉菜单中,我的目标是仅显示5个项目,并选择一个名为“ showMore”的项目,在单击该项目后,向我显示一个弹出窗口,其中包含其他项目,例如: mylist = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t] my_showing_list_in_dropdown = [a,b,c,d,e,showMore]

<div class="btn-group">
                <button type="button" class="btn btn-light dropdown-toggle dropbtn" data-toggle="dropdown" (click)="onUpdateData()">
                </button>

                <div class="dropdown-menu dropdown-menu-right dropdwn" >
                  <a
                    class="dropdown-item p-1 small "
                   *ngFor="let x of mylist" (click)="selectedItem(x,index)"
                    >
                    <span class="mr-2"
                      ><small style="color: gray;"
                        >{{x}}</small></span
                    >

                  </a>
                  <li class="divider"></li>
                  <a
                  class="dropdown-item p-1 small "
                  (click)="creation()"
                  >
                  <span class="mr-2"
                    ><small style="color: gray;"
                      >SHOW More</small></span
                  >

                </a>
                </div>
              </div>
How can I do it?