Javascript 从下拉列表中选择要在页面上填充的多个项目

我在不同的面板中显示阵列中的数据，用户可以选择从视图中删除面板，删除的面板将填充在下拉菜单中。用户可以灵活地选择多个面板标题，以使用所选面板重新填充页面

目前，我可以删除面板-将它们推到一个新数组中，并使用从数组中删除的面板标题填充下拉列表

我正在使用引导和角度-在这一刻，我有困难显示正确的下拉菜单，因为它应该和不确定是什么错。。。。以下是我的html下拉列表：

<select multiple>
  <option *ngFor="let item of dropdownlist">{{item.title}}</option>
</select>

{{item.title}

这只是显示为一个空矩形，当我删除一个面板时，标题会显示在下拉列表中，但它似乎缺少样式

这是我希望它看起来的样子：

这也是我如何将面板移除和添加到阵列的方法：

<a title="Remove Panel" (click)="removePanel(i);">
   <i class="glyphicon glyphicon-remove"></i>
</a>

removePanel(index: number): void {
    this.dropdownlist.push(new Object(this.items.splice(index, 1)[0]));
    }

dropdownlist: Array<any> = [];

items: Array<Panel> = [
        new Panel(1, 'panel 1', 'show text', 'test data in modal'),
        new Panel(2, 'panel 2','show image', 'more test data'),
        new Panel(3, 'panel 3', 'show graph', 'more and more data')
    ];

移除面板（索引：编号）：无效{
this.dropdownlist.push（新对象（this.items.splice（索引，1）[0]）；
}
dropdownlist:Array=[]；
项目：数组=[
新面板（1，‘面板1’、‘显示文本’、‘模态中的测试数据’），
新面板（2，‘面板2’、‘显示图像’、‘更多测试数据’），
新面板（3，‘面板3’、‘显示图形’、‘越来越多的数据’）
];

---

我也不确定我的添加功能从下拉列表到项目会是什么样子，是否会与我的removePanel功能相反？

这不是你问题的答案，但我建议你使用这不是你问题的答案，但我建议你使用另一个选项是使用引导多选插件，以下是演示的链接：

以下是github回购协议：

它非常好，我推荐它，如果您决定以后再次配置它，它还为您提供了更多选项，因为您已经将它包含在项目中，您可以在任何需要的地方使用它

---

我认为你不可能在不使用插件的情况下自然地实现这一点。

另一个选择是使用Bootstrap multiple select插件，下面是演示的链接：

以下是github回购协议：

它非常好，我推荐它，如果您决定以后再次配置它，它还为您提供了更多选项，因为您已经将它包含在项目中，您可以在任何需要的地方使用它

---

我不认为你不使用插件就能够自然地实现这一点。

谢谢，我会调查的。谢谢，我会调查的。