然后是JS代码。
layui.use(['form', 'layedit','upload'], function () { var form = layui.form form.on('select(hc_select)', function (data) { //选择移交单位 赋值给input框 $("#HandoverCompany").val(data.value); $("#hc_select").next().find("dl").css({ "display": "none" }); form.render(); }); window.search = function () { var value = $("#HandoverCompany").val(); $("#hc_select").val(value); form.render(); $("#hc_select").next().find("dl").css({ "display": "block" }); var dl = $("#hc_select").next().find("dl").children(); var j = -1; for (var i = 0; i < dl.length; i++) { if (dl[i].innerHTML.indexOf(value) <= -1) { dl[i].style.display = "none"; j++; } if (j == dl.length-1) { $("#hc_select").next().find("dl").css({ "display": "none" }); } } } });
简单说一下我的思路,首先select选择的值要能赋值给input框,可以就需要form.on('select(hc_select)'来监听select值的变化,选择了之后要把下拉列表给隐藏掉。同时重新渲染一下这个表单,只重新渲染当前的select也是可以的。
然后就是输入到input框里的文字如何去select中去搜索。首先我们通过检查select的dom结构可以发现,他里面的选项都是在dl下的dd标签中,如图。
然后我们获取到dl标签,然后通过循环的方式挨个去匹配dd中的选项与我们输入的文本是否存在关系。通过indexOf就行。如果不相似,则直接隐藏掉,然后这里为什么要定义一个j呢?
是因为如果都不匹配的话,下面还是会出来一个空的dl标签,页面显示就是一个空的小列表,有点影响美观,所以如果你输入的文本和下拉列表中的选项都没关系的话,直接把dl给隐藏了。这里我是判断不相似的个数如果和dl.length 相等的话,就说明你输入的文本和select的选项没一个相似的,然后就可以把dl隐藏了。
更多layui知识请关注PHP中文网的layui使用教程栏目。
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com