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

叁歲伎倆 2023-10-10 10:54 37阅读 0赞

#### 文章目录 ####

*   *   *  使用Jquery实现对select的监听
         *  使用layui实现对select的监听
         *  入坑友情提示

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

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

***有对比就有不同！***

#### 使用Jquery实现对select的监听 ####

页面代码

页面展示

改变第一个下拉菜单的值，使得第二个发生改变。  
![在这里插入图片描述][20200225153905450.jpg]  
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);
    });

没毛病！完全正确。值被成功填充。  
![在这里插入图片描述][2020022515421194.jpg]

#### 使用layui实现对select的监听 ####

页面代码

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官方文档][layui]。果然人家写的明明白白！！！  
![在这里插入图片描述][20200225155511754.jpg]  
监听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();  //重新渲染表单。没有这个数据照样加载不出来
    	});
    });

管用了！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd6aV95dQ_size_16_color_FFFFFF_t_70]

#### 入坑友情提示 ####

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

[20200225153905450.jpg]: https://img-blog.csdnimg.cn/20200225153905450.jpg
[2020022515421194.jpg]: https://img-blog.csdnimg.cn/2020022515421194.jpg
[layui]: https://www.layui.com/doc/modules/form.html
[20200225155511754.jpg]: https://img-blog.csdnimg.cn/20200225155511754.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd6aV95dQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225155842399.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd6aV95dQ==,size_16,color_FFFFFF,t_70