自己寫項目時偶爾會遇到下拉時根據條件搜索的這種需求,在此記錄一下,方便以後查詢。
1、先上圖展示結果:
2、直接貼代碼:
<script src="jquery-3.2.1.min.js"></script>
<script src="select2.full.min.js"></script>
<div class="select1">
<select class="mySelect">
<option>西瓜</option>
<option>蘋果</option>
<option>香蕉</option>
<option>菠蘿</option>
<option>桃子</option>
</select>
</div>
<script>
$(function(){
$('.mySelect').select2();
})
</script>
後臺獲取數據展示方式:
<div class="form-group">
<label class="col-sm-1 control-label">客戶姓名</label>
<div class="col-sm-10">
<select name="customerId" id="customerId" lay-search="" class="form-control">
<option value="">請選擇客戶姓名</option>
<option th:selected="${order != null && order.customerId eq customer.customerId}" th:each="customer : ${customerList}"
th:value="${customer.customerId}" th:text="${customer.name}">
</option>
</select>
</div>
</div>
重點在於要引入select2的js插件。
插件下載