Selecting multiple items from dropdown to populate on page

Question

I am displaying data from an array in different panels and the user has the option to remove panels from the view and the removed panels are populated in a dropdown menu. The user will have the flexibility to select multiple panel titles to repopulate the page with the selected panels.

Currently i am able to remove panels - push them to a new array and populate the dropdown with removed panel titles from the array.

I am using bootstrap and angular - At this moment i am having trouble displaying the dropdown menu properly as it should and not sure what is wrong.... Here is my html for dropdown:

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

This is just showing as an empty rectangle and when i remove a panel the title shows up in the dropdown but it seems like it is missing styling

This is how i would like it to look:

Also this is how i am removing and adding panel to an array:

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

I am also not sure how my add function will look from dropdown to items and will be the opposite of my removePanel function?

Answer 1

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

Answer 2

Another option would be to use the Bootstrap multiple select plugin, here is a link to the demo:

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

And here is the github repo:

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

It's pretty good and I recommend it, it also gives you more options if you decide to configure it again later, and because you'll have already included it in the project you can use this anywhere you need it.

I don't think you'll be able to achieve this naturally and without using a plugin.