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

Posted 2023-03-05

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

【英文标题】：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"> 元素的列表。