在单独 div 中向用户直观地显示选中的复选框

Question

我有一个多 select 下拉菜单，我希望 div 显示每个 selected checkbox（来自我的 array）显示如下以下内容

我正在使用 Bootstrap 3，我确信我以前见过它被使用过，但我无法在任何地方找到它，甚至不知道如何创建设计。我什至想不出我想要的东西的名字。

Answer 1

请看这段代码。

您的下拉菜单：

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option selected value="Option 1">Option 1</option>
  <option selected value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option selected value="Option 4">Option 4</option>
</select>

你的div：

<div style="border-style: solid;">
  <div class="show-selected">Option 1</div>
  <div class="show-selected">Option 2</div>
  <div class="show-selected">Option 4</div>
</div>

CSS:

.show-selected {
  font-size:500
}

这应该有望从您的 backlog/tfs/jira/git 中清除这张票。