有时候项目中会遇到一个下拉框,那么layui中的下拉是不二之选。它集成在form.js中,加载使用倒是很方便,但是在使用中会遇到一种情况:数据量很多的选择。那么该如何高效筛选呢?
口头描述一下吧:可以使用一个文本框、两个下拉,一个用于显示,一个用于取值【隐藏起来】。通过往这个文本框输入值,可以使用监听器或者onchange事件,并与下拉项进行比较【隐藏的】从而进行联想匹配,并操作dom让显示的那个下拉改变,layui的select重新渲染。不多说,码上见:
//原理:使用隐藏的下拉与输入值进行判断,如果匹配,则追加到显示的下拉中
<s:select list="hcVehicleList" id="sel_carList" listKey="id" listValue="vehicleNumber" name="paiban.vehicleID" headerKey="" headerValue="请选择" ></s:select>
<div class="my_hide"> <%--使用jq让下面这个元素隐藏起来--%>
<s:select list="hcVehicleList" lay-ignore="" id="sel_carList2" listKey="id" listValue="vehicleNumber" name="" headerKey="