Select2控件的使用

Select2控件
支持模糊匹配
这里写图片描述
引入Select2的CSS和JS

<link rel="stylesheet" type="text/css" href="${ctx}/static/comp/select2/select2.css?5">
<script src="${ctx}/static/comp/select2/select2.min.js?4"></script>

页面元素

<select path="labId" class="inputStyle" placeholder="请选择">
    <option value=""></option>
    <c:forEach items="${laboratoryList}" var="s">
        <option value="${s.id}">${s.name}</option>
    </c:forEach>
<select>

laboratoryList,通过Modle返回

model.addAttribute("laboratoryList", dailyPlanWebService.selectValidLabList());

JS代码

$('#sampBizModeId').select2({width: 100 + "%", placeholder: "请选择", allowClear: true});

通过select()2方法,Select2的JS会将普通select控件的页面元素
转换为select2的元素格式
这里写图片描述

猜你喜欢

转载自blog.csdn.net/nangeali/article/details/80838219