layui form表单中监听select下拉菜单入坑

这几天开始使用layui前端插件，但是完全没有习惯里面的一些监听事件。这不今天我写form表单中下拉select菜单监听就跳坑了！！！

任务： 给两个下拉菜单，点击第一个下拉菜单，第二个下拉菜单完成值的改变。

有对比就有不同！

使用Jquery实现对select的监听

页面代码

"#" method="post">
	"provinces" id="pro" value="">
		"1">河北省
		"2">河南省
	
	"cities" id="cit" value="">
		"">请选择...
	
	"submit" value="提交2" />

页面展示

改变第一个下拉菜单的值，使得第二个发生改变。

javascript代码

//jquery注册值改变事件：内容改变后执行此事件
$("#pro").change(function() {
	var str = "请选择...";
	str += "CZ市";
	str += "LV市";
	$("#cit").html(str);
});

没毛病！完全正确。值被成功填充。

使用layui实现对select的监听

页面代码

"layui-form" lay-filter="testForm">
	
"layui-input-inline">
		"provinces" id="provinces" lay-filter="p" value="">
			"1">河北省
			"2">河南省
		
	
	
"layui-input-inline">
		"cities" id="cities" lay-filter="c" value="">
			"">请选择...
		
	
	"submit" value="提交" lay-filter="add" />

javascript代码（别信！这是入坑代码。）

$("#provinces").change(function() {
	var str = "请选择...";
	str += "CZ市";
	str += "LV市";
	$("#cities").html(str);
});

执行结果，没有任何反应，没有任何反应，他还不报错？？？

查看layui官方文档：layui官方文档。果然人家写的明明白白！！！

监听select要用layui定义的，自己写的不顶事儿？？

重新写的javascript代码

layui.use(['table', 'form', 'jquery'], function() {
	var table = layui.table,
		form = layui.form,
		$ = layui.jquery;
	//from监听select下拉菜单
	form.on('select(p)', function(data) {
		var str = "请选择...";
		str += "CZ市";
		str += "LV市";
		$("#cities").html(str);
		form.render();  //重新渲染表单。没有这个数据照样加载不出来
	});
});

管用了！！！

入坑友情提示

1. 使用layui的监听事件一定要使用“人家”官方定义的lay-filter=“xxx”。
2. layui加载数据完成之后，一定要重新渲染，form加载的数据就重新渲染表单（form.render()）;table加载的数据就重新渲染表格（table.reload(‘reload’),page:{{curr:1}}）