如何制作不在 HTML 中的多选下拉菜单。它需要在良好的用户界面中

Posted 2023-03-05

【中文标题】如何制作不在 HTML 中的多选下拉菜单。它需要在良好的用户界面中

【英文标题】：How can I make a multiselect dropdown not in HTML. It needs to be in good UI

【发布时间】：2019-03-02 02:06:27

【问题描述】：

我对编码很陌生， 我正在尝试制作一个好看的多选下拉菜单。

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

【问题讨论】：

您好，欢迎来到 Stack Overflow！您能否更详细地解释您的问题。现在还不清楚你在问什么。谢谢你，祝你好运！

这能回答你的问题吗？ Bootstrap 4 multiselect dropdown

【参考方案1】：

您可以通过多种方式做到这一点，其中一种是使用语义 ui。添加这个脚本文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<script>
$('.ui.fluid.dropdown')
.dropdown(
maxSelections: 5
) 
</script>

 <select  class="ui fluid dropdown">
            <option value="">Skills</option>
 </select>

为了更好地理解，请通过这个例子Bootstrap multiselect is not working when i bind the data from response in Angularjs

如果您想在 Bootstrap4 中使用，请查看此Bootstrap 4 multiselect dropdown