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  所有不能多选，支持搜索！第一次写博客，写的有点乱。