多选标签然后在下方展示所有标签

这是一个交互式的功能，需要使用JavaScript和CSS来实现。以下是一个简单的实现方法：

1. 创建一个HTML页面，包含一个多选框和一个用于显示所选标签的元素，例如div或ul。

2. 使用JavaScript来检测多选框的变化，当选中或取消选中一个标签时，将其添加或删除到所选标签的元素中。

3. 使用CSS来美化所选标签的元素，例如添加背景颜色、边框等样式。

4. 可以添加一些交互功能，例如单击标签以取消选择或添加其他标签。

以下是示例代码：

HTML:

<label for="tags">选择标签:</label>
<select id="tags" multiple>
  <option value="tag1">标签1</option>
  <option value="tag2">标签2</option>
  <option value="tag3">标签3</option>
  <option value="tag4">标签4</option>
</select>
<div id="selected-tags"></div>

JavaScript:

const tagsSelect = document.getElementById("tags");
const selectedTags = document.getElementById("selected-tags");

tagsSelect.addEventListener("change", function() {
  selectedTags.innerHTML = "";
  const selectedOptions = Array.from(tagsSelect.selectedOptions);
  selectedOptions.forEach(option => {
    const tag = document.createElement("span");
    tag.innerText = option.value;
    tag.classList.add("selected-tag");
    selectedTags.appendChild(tag);
  });
});

CSS:

.selected-tag {
  display: inline-block;
  padding: 4px 8px;
  margin: 4px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.selected-tag:hover {
  background-color: #e6e6e6;
}