前段时间在做一个小项目的时候,因为项目需求需要选择ip,然后就写成简单的Select下拉框进行选择,由于ip太多网段太乱
公司人就说能不能实现一个带有搜索的下拉框,然后我通过学习发现BootStrap已经完美的实现了这个功能。
我先看下俩次实现的效果
1.这个是bootstrap的简单下拉框看着那么多的ip小伙伴们是不是也眼花缭乱了。
2.下面是使用了带有搜索的下拉框,俩个比较一下还是下面那个比较方便吧,下面我们进入正题。
第一步:下载和引入BootStrap的必要css和js文件引入页面。
bootstrap select下载地址 http://www.bootcdn.cn/bootstrap-select/
引入必要的css和js文件,注意jquery一定要在bootstrap.min.js上面。
<link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap-select.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/bootstrap/js/jquery-1.11.min.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script>
第二步:写一个jsp页面实现一个select框和写一个js方法,这样一个简单的带有搜索功能的下拉框就完成了.
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
// $('.selectpicker').selectpicker('hide');
});
<label for="id_select">下拉框:</label>
<select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
<option>123</option>
<option>456</option>
<option selected>789</option>
</optgroup>
</select>
如果觉得可以请留下你们的赞!谢谢