多选下拉菜单可显示多个值

时间:2019-07-04 10:33:48

标签: javascript

我有一个下拉菜单,可以选择它过滤我的报告输出。我只能从该下拉列表中选择一个值。

现在我有一个需要启用多重选择才能选择多个值的要求。

我添加了多个选择,现在下拉列表被更改为我不想要的选择框,因为我有100多个值,并且为了减少空间,我只需要使用多重选择进行下拉。

我正在使用javascript和jQuery,但无法实现。 有什么建议吗?

3 个答案:

答案 0 :(得分:1)

如果您希望“原始”多选,则可以使用默认的多选,其中仅将使用HTML来实现。 在这种情况下,上述答案中的示例就可以正常工作。

问题在于此多重选择非常丑陋且不友好,因此我建议您使用可进行多重选择的JS插件。

有些插件可以使您的多选非常美观且用户友好,而无需付出太多努力。以下是一些示例:

这是我使用过的东西:https://mdbootstrap.com/docs/jquery/forms/multiselect/

这是一篇有用的文章,您可以在其中找到许多有用的插件示例:https://www.jqueryscript.net/blog/Best-Multiple-Select-jQuery-Plugins.html

答案 1 :(得分:0)

有一个multiple属性HTML。您可以通过按ctrl并在选择中单击值来选择多个值。

您可以尝试以下方法:

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

答案 2 :(得分:-1)

如果我是我,我会使用https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox之类的jquery插件