有没有类似 select2 支持下拉多选，同时又可批量复制粘贴的控件

Posted 2023-04-11

参考技术A 第一步，创建静态页面select.html，引入select2相关的css和js文件，并引入jQuery核心js，如下图所示：

第二步，在body标签内插入select元素，设置属性multiple和class，宽度为300px，如下图所示：

第三步，初始化select2插件，需要调用select2()方法，如下图所示：

第四步，为了演示获取下拉框值，这里利用button按钮点击事件，在select下方插入一个button按钮，如下图所示：

第五步，编写按钮点击事件，事件里获取多选下拉框值和文本内容，如下图所示：本回答被提问者采纳

如何进行下拉多选？ [复制]

【中文标题】如何进行下拉多选？ [复制]

【英文标题】：How do I make a dropdown multi select? [duplicate]

【发布时间】：2019-09-13 17:17:21

【问题描述】：

我正在尝试将下拉菜单设为多选。

例如，我应该可以同时选择选项 1、选项 2、选项 3 和选项 4。

只是为了让事情更容易理解。我在下面附上了所需的结果：

<select>
  <option>All</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

【问题讨论】：

您需要搜索这样的 jQuery 插件才能做到这一点。它不是 HTML 提供的主要功能。可以参考here

HTML5 有一个选择多个参数。如果您想要一些快速样式，只需使用 bootstrap 4。此堆栈帖子显示了如何快速设置样式：***.com/questions/50895806/…

通过这个答案实现了。干杯@JensIngels

【参考方案1】：

您可以使用多个作为select 标记的属性。它是 HTML 的一个基本特性。

这是一个例子：

<select multiple>
  <option value="val1">Val1</option>
  <option value="val2">Val2</option>
  <option value="val3">Val3</option>
  <option value="val4">Val4</option>
</select>

或者你可以使用任何 jQuery 插件来实现同样的效果。

【讨论】：

原生 HTML 答案很少见，但很棒。没有理由使用 jQuery 甚至 JavaScript 来模拟原生 HTML 功能

【参考方案2】：

HTML 没有这样的控制。

<select> 元素将呈现一个下拉菜单，让您选择一个选项。

<select multiple> 元素将呈现一个列表框，让您选择多个选项。

要获得您想要的 UI，您需要使用 JavaScript。一个好的起点是<input type="checkbox"> 元素的列表。