BootStrap框架学习-下拉款Select搜索功能

BootStrap框架学习-下拉款Select搜索功能

在做项目过程与遇到下拉框问题，百度学习了一下，在这里分享。

主要用到的属性：

• 有multiple属性：多选
• 无multiple属性：单选

• data-live-search：true 支持搜索，flase不支持搜索

具体用法：

1.引入css

<link rel="stylesheet" type="text/css" href="${res.url}/static/plugins/bootstrap/css/bootstrap-select.css"/>

<link href="${res.url}/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

2.引入js

<script src="${res.url}/static/plugins/bootstrap/js/bootstrap-select.js"></script>

<script src="${res.url}/static/js/vendor/bootstrap-select.min.js"></script>

<script src="${res.url}/static/js/jquery.min.js"></script>

3.jquery

<script type="text/javascript">    $(window).on('load', function () {        $('.selectpicker').selectpicker({            'selectedText': 'cat'        });        // $('.selectpicker').selectpicker('hide'); --隐藏    });</script>

4.关键部分CLASS 和 是否支持搜索

<div class="clearfix mt25 form-group " style="vertical-align: center" id="declCode1" >    <label>资质编码:</label>    <select id="declCode" name="declCode" class="selectpicker show-tick "  data-live-search="true">        <option   selected value="${entity.declCode}" style="width: 368px;">${entity.declCode}</option>        <c:forEach  items="${list}" var="tpl">            <option  value="${tpl.declCode}">${tpl.declCode}</option>        </c:forEach>    </select></div>5.控制器
因为我是从数据库读出来回调过来的
mav.addObject("list", dmDeclTplService.query());
运行界面：
没有multiple  所有不能多选，支持搜索！第一次写博客，写的有点乱。