1、问题概述?
在使用jQuery的时候,我们可以通过如下方式为select下拉框绑定change事件,但是在layui中不生效。
所以经常有人发问:Layui中为select绑定change事件不生效。
$(function(){
//通过id为select绑定change事件
$("#selectId").bind("change",function(){
});
});
因为Layui框架重写了这个功能,需要使用Layui的方式绑定change事件。
2、Layui为select绑定change事件方式如下
2.1、前端页面使用方式
注意点:需要使用到属性lay-filter="assetsystem",名字自定义
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-inline">
<select lay-filter="assetsystem" name="assetsystem" id="assetsystem">
</select>
</div>
</div>
</div>
2.2、为select绑定change事件
重点1:通过form.on为select绑定change事件
重点2:通过form.on中的data.value可以获取下拉框选中的值。
<script>
layui.use(['layer','element','form','util','table','laydate'],function(){
var element = layui.element;
var table = layui.table;
var form = layui.form;
var util = layui.util;
var $ = layui.$;
//绑定规则使用到lay-filter
form.on('select(assetsystem)', function(data){
//data.value获取下拉框选中的值
//也可以在change事件中使用异步请求等操作相关数据
//如实现二级联动等。
/*$.ajax({
type: "get",
url: "/path/youpath",
cache: false,
data:{"projectalias":data.value},
dataType: "text",
success:function(msg){
form.render();
}
});*/
});
});
</script>