从下拉列表中选择多个项目以填充页面答案

【问题标题】：Selecting multiple items from dropdown to populate on page从下拉列表中选择多个项目以填充页面
【发布时间】：2017-03-24 08:06:36
【问题描述】：

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

目前我能够删除面板 - 将它们推送到新数组并使用从数组中删除的面板标题填充下拉列表。

我正在使用引导程序和角度 - 目前我无法正确显示下拉菜单，并且不确定出了什么问题......这是我的下拉菜单：

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

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

这就是我想要的样子：

这也是我删除面板并将其添加到数组的方式：

<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')
    ];

我也不确定我的 add 函数从下拉列表到项的外观如何，是否与我的 removePanel 函数相反？

【问题讨论】：

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

这不是你的问题的答案，但我建议你使用select2

【讨论】：

谢谢，我会调查的。

【解决方案2】：

另一种选择是使用 Bootstrap 多选插件，这里是演示的链接：

http://davidstutz.github.io/bootstrap-multiselect/

这里是 github 仓库：

https://github.com/davidstutz/bootstrap-multiselect

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

我认为不使用插件自然无法做到这一点。

【讨论】：