一、layui.use
这里layui的官方文档:https://www.layui.com/doc/
layui这个框架采用的是经典模块化
layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载。
layui.use就是一种加载模块的方式
如上代码
layui.use(['form', 'layer','laydate'],function(){
$ = layui.jquery; //获取jquey模块
var form = layui.form, //获取form模块
laydate = layui.laydate, //获取laydate模块
layer = layui.layer; //获取layer模块
})
这个加载了layui的form、layer、laydate、模块
二、form.on事件监听
默认下,事件所监听的是全部form模块元素,如果只想监听某一个元素,可以使用事件过滤器lay-filter
<select id="classify" name="classify" lay-filter="classify"></select>
form.on('select(classify)',function (){})
三、代码(此时再看下面代码)
<select id="classify" name="classify" lay-filter="classify">
<option value="0" text="请选择">请选择</option>
<option th:each="t:${aDicClassifies}" th:value="${t.classify}" th:text="${t.classify}">${t.classify}</option>
</select>
<script type="text/javascript">
//启动模块
layui.use(['form', 'layer','laydate'],function() {
$ = layui.jquery;
var form = layui.form,
laydate = layui.laydate,
layer = layui.layer;
form.on('select(classify)',function (data) {
//监听到了下拉框选择的选项,传递过来
// console.log(data);//在控制台输出信息
var classfies = data.value;
// console.log(classfies);
//再利用ajax将数据传到后端,来获取到对应下拉框选项而出现的值
$.ajax({
type:"post",
url:"/a_dic_appendantName/aDicAppendantname/getType",
data:{"classfies":classfies},
dataType:"json",
success:function (d) {
// layer.alert(1122)
//对应的值传回,拼出html下拉框语句
var tmp='<option value="">请选择</option>';
for (var i in d){
tmp +='<option value="'+d[i].type+'">'+d[i].type+'</option>';
}
$("#type").html(tmp);
form.render();
},error:function () {
layer.alert('请求失败');
}
});
})
});
</script>
欢迎加入京东内购羊毛群一手羊毛消息:谢谢支持