下拉框中的选项太多 需要一个带搜索功能的输入框,类似于下面这个样子:
本例子中用了一个js插件,首先需要引入插件的css和css中用到的图片,再引入插件的js
第一步引入css:
<link href="${resources}/css/bootstrap/select2.css" rel="stylesheet" >
第二步修改css用到的插件图标:
background: url('../../img/select2.png') right top no-repeat;
把css中的所有引入的select2.png的图片更换成你本地的路径
第三步导入需要用到的js:
<script type="text/javascript" src="${resources}/js/bootstrap/select2.min.js"></script>
在导入js插件前先导入需要的jquery组件,类似于这样的:
<script type="text/javascript" src="${resources}/js/bootstrap/custom.js"></script>
<script type="text/javascript" src="${resources}/js/bootstrap/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${resources}/js/bootstrap/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="${resources}/js/bootstrap/select2.min.js"></script>
第四步使用插件:
页面代码:页面用的是freemarker构建的
<select name="brandId1" id="brandId1" class="form-control select2">
<option value="">请选择</option>
<#if brandList?exists> <#list brandList as item>
<option value="${item.id}" name="${(item.icon)!''}"> ${item.name}</option>
</#list> </#if>
</select>
js用的是类选中 select2 js代码:
// Select2
jQuery(".select2").select2({
width: '100%'
});
写到这里点击一下你的下拉框是不是和我的一样了呢,不一样的话请留言吧!
页面需要的插件:插件下载地址