介绍一个小插件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两个选项
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>
</head>
<body>
<select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="搜索" data-none-Selected-Text="请选择" data-size="3" data-actions-box="true">              
    <option value="1">a.test.com</option>
    <option value="2">b.test.com</option>
    <option value="3">c.test.com</option>
    <option value="4">d.test.com</option>
    <option value="5">e.test.com</option>
    <option value="6">f.test.com</option>
    <option value="7">g.test.com</option>
    <option value="8">h.test.com</option>
    <option value="9">i.test.com</option>
    <option value="10">j.test.com</option>
    <option value="11">k.test.com</option>
</select>

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

</script>
</body>
</html>

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

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

另一个插件Chosen也值得关注下:

https://harvesthq.github.io/chosen/

https://github.com/harvesthq/chosen


参考资料:

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