layui实现select区域联动的方法

简介

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的乐至网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

要实现联动效果注意两点：

第一要可以监听到select的change事件；

第二异步加载的内容，需要重新渲染后才可以 正常使用。

Html结构：

    

        

            选择地区
            

                
                    请选择省
                
            
            

                
                    请选择市
                
            
            

                
                    请选择区/县
                
            
        
        

            选择地区
            

                
                    请选择乡镇/街道
                
            
            
                
                    
                
            
        
    

js：

总结：

1、select的chage监听事件使用

form.on('select(myselect)', function(data){}）  其中myselect是select的 lay-filter属性值

2、数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用，需要使用form.render('select');重新渲染一次，就可以正常使用。

以上就是基于layui实现select区域联动的详细内容，更多请关注创新互联其它相关文章！