我如何使用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?