Select2 插件：在表单元素之外显示选定的选项

Posted 2023-05-07

【中文标题】Select2 插件：在表单元素之外显示选定的选项

【英文标题】：Select2 plugin: Showing selected options outside the form element

【发布时间】：2018-07-20 18:06:40

【问题描述】：

我正在使用 Select2 插件处理多选下拉菜单。但是，我有一些我似乎无法弄清楚的样式问题。

Select2 插件允许您从下拉菜单中选择多个选项，在下拉栏中很好地显示所选选项。

我想要做的不是在下拉栏中显示它，而是在外面显示选定的选项，彼此堆叠（即每行一个）。

这是我目前进度的代码笔：

我相信我必须玩弄这个选择器

.select2-container
   *:focus
     outline:0px;
   

但除此之外，我无法完全理解它。

我的样式目前产生这个：

我希望制作这个（全宽，即表格格式）：

如果有人能指出正确的方向，我将不胜感激。

谢谢。

【参考方案1】：

您可以使用 css clear 属性来做到这一点。将此添加到您的 css 文件中。

.select2-container--bgform .select2-selection--multiple .select2-selection__choice 
    clear: both;

【讨论】：

感谢您的回答。这使得选项都在它们自己的行中，但选项仍然没有放在表单元素下。见gyazo.com/f56a7823d1e820f2a873faf9f82bd75f