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

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

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

有对比就有不同！

使用Jquery实现对select的监听

页面代码

<form action="#" method="post">
	<select name="provinces" id="pro" value="">
		<option value="1">河北省</option>
		<option value="2">河南省</option>
	</select>
	<select name="cities" id="cit" value="">
		<option value="">请选择...</option>
	</select>
	<input type="submit" value="提交2" />
</form>

页面展示

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

javascript代码

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

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

使用layui实现对select的监听

页面代码

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

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

$("#provinces").change(function() {
	var str = "<option value=' '>请选择...</option>";
	str += "<option value='1'>CZ市</option>";
	str += "<option value='2'>LV市</option>";
	$("#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 = "<option value=' '>请选择...</option>";
		str += "<option value='1'>CZ市</option>";
		str += "<option value='2'>LV市</option>";
		$("#cities").html(str);
		form.render();  //重新渲染表单。没有这个数据照样加载不出来
	});
});

管用了！！！

入坑友情提示

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