select2下拉模糊查詢單選
前臺配置
1. 在head標籤內新增樣式如下列子（請正確選擇地址並且放在第一位）
<head>
<linkhref="<%=request.getContextPath()%>/js/plugins/select2-4.0.3/select2.css"rel="stylesheet" />
</head>
2. 在select標籤內新增class="multiSelect"（如果沒有成功請先將class內其他刪除）
<select id="XXX" class="multiSelect"name="XXX">
<option value=" " > --請選擇--</option>
<c:forEach items="${XXX}" var="XXX">
<optionvalue="${XXX.id}" >${XXX.name}</option>
</c:forEach>
</select>
3. 新增jquery.min.js?v=2.1.4和select2.js包（請正確選擇地址並且將這兩條放在放在前排位置）
<scriptsrc="<%=request.getContextPath()%>/js/jquery.min.js?v=2.1.4"></script>
<scriptsrc="<%=request.getContextPath()%>/js/plugins/select2-4.0.3/select2.js"></script>
<script>
$(document).ready(function() {
$(".multiSelect").select2({ 'width':'200px'})//也可以調$("#XXX")
});
</script>
注意1:如果使用失敗請開啟瀏覽器該頁面按F12檢視是否和其他樣式或者外掛衝突逐個刪除測試。
注意2:請事先確保select2.css和select2.js包已匯入到專案中
後臺
4.在Controller中寫入相應方法例如
public void gotoXXX(){ List XXX = ObjectService.XXXService.getByXXX(); setAttr("XXX",XXX); render("/WEB-INF/view/XXX/XXX/XXX.jsp");
}
5. 在Service中寫入相應方法例如
public List getByXXX(){ String sql="對應sql語句"; List result = Db.find(sql); return result; }
注意：XXX命名並不固定但是請確保前後命名一致