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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有类似 select2 支持下拉多选,同时又可批量复制粘贴的控件相关的知识,希望对你有一定的参考价值。

参考技术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 没有这样的控制。

&lt;select&gt; 元素将呈现一个下拉菜单,让您选择一个选项。

&lt;select multiple&gt; 元素将呈现一个列表框,让您选择多个选项。

要获得您想要的 UI,您需要使用 JavaScript。一个好的起点是&lt;input type="checkbox"&gt; 元素的列表。

【讨论】:

以上是关于有没有类似 select2 支持下拉多选,同时又可批量复制粘贴的控件的主要内容,如果未能解决你的问题,请参考以下文章

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

wpf下拉多选自定义控件添加change事件

axure 用中继器实现下拉多选框

Flutter:使用复选框进行下拉多选

关于knockout下拉多选值的应用

自己用ul模拟实现下拉多选框,