如何不使用HTML进行多选下拉列表。它必须处于良好的用户界面

时间:2018-09-26 10:12:35

标签: twitter-bootstrap

我是编码的新手,
我正在尝试使外观更好的多选下拉列表。

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

1 个答案:

答案 0 :(得分:0)

您可以通过多种方式执行此操作,一种方式是使用语义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