select2下拉框可根据条件搜索

自己写项目时偶尔会遇到下拉时根据条件搜索的这种需求,在此记录一下,方便以后查询。
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插件。
插件下载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值