介绍一个小插件bootstrap-select

当我们需要html的select功能时,我想bootstrap-select就完全可以满足你的需要,支持单选、多选、搜索等功能。下面的几个选项是我目前用到了的,供参考,如下:

class="selectpicker" 代表使用bootstrap-select这个插件
multiple 支持多选
data-live-search=“true" 支持搜索
data-live-search-placeholder=“搜索” 搜索时显示的字符串
data-none-Selected-Text="请选择” 没有选择时默认显示的字符串
data-size=“3" 有很多选项时,默认只显示3个,支持下拉
data-actions-box=“true” 出现Select All/Deselect All两个选项
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 6     <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 7     <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
 8     <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 
10     <link href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" rel="stylesheet">
11     <script src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>
12 </head>
13 <body>
14 <select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="搜索" data-none-Selected-Text="请选择" data-size="3" data-actions-box="true">              
15     <option value="1">a.test.com</option>
16     <option value="2">b.test.com</option>
17     <option value="3">c.test.com</option>
18     <option value="4">d.test.com</option>
19     <option value="5">e.test.com</option>
20     <option value="6">f.test.com</option>
21     <option value="7">g.test.com</option>
22     <option value="8">h.test.com</option>
23     <option value="9">i.test.com</option>
24     <option value="10">j.test.com</option>
25     <option value="11">k.test.com</option>
26 </select>
27 
28 <select class="selectpicker">
29   <option>Mustard</option>
30   <option>Ketchup</option>
31   <option>Relish</option>
32 </select>
33 
34 </script>
35 </body>
36 </html>

另外,如果使用jquery动态修改bootstrap-select的option选项,需要重新刷新下bootstrap-select的ui,见refresh

$('.selectpicker').selectpicker('refresh’)

参考资料:

官网:https://silviomoreto.github.io/bootstrap-select/