layui如何实现三级联动 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关layui如何实现三级联动的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

layui实现三级联动的方法:首先创建的html页面,然后创建address.js文件,内容为“Address.prototype。?function(){…}”;最后通过layui模块实现三级联动即可。

 & lt; html>
　　& lt; head>
　　& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"/比;
　　& lt;元名称=皉enderer"内容=皐ebkit"比;
　　& lt;元http-equiv=癤-UA-Compatible"内容=癐E=边缘,chrome=1,比;
　　& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1,最大范围=1,比;
　　& lt;元名称=癮pple-mobile-web-app-status-bar-style"内容=癰lack"比;
　　& lt;元名称=癮pple-mobile-web-app-capable"内容=皔es"比;
　　& lt;元名称=癴ormat-detection"电话内容=?no"比;
　　& lt;链接rel=皊tylesheet"href=https://www.yisu.com/layui-v2.1.5/css/layui.css "/> 
　　
　　

　　<选择name="省“lay-filter==笆　?“省”类
　　<选项值=" ">请选择省
　　
　　
　　
　　<选择name="城市" lay-filter="城市"禁用>
　　<选项值=" ">请选择市
　　
　　
　　
　　<选择name="区域" lay-filter="区域"禁用>
　　<选项值=" ">请选择县/区> 
　　
　　
　　 
　　<脚本type=" text/javascript“src="地址。js ">

 ps:需要注意的有:$ . get (“address.json"、功能(数据){}的地址为json地址,地址不对会报异常。
　　layui.define ([“form",“jquery")、功能(出口){
　　var=layui.form形式,
　　美元=layui.jquery,
　　地址=function () {};
　　
　　Address.prototype。?function () {//加载省数据
　　var proHtml=& # 39; & # 39;这=;
　　$ . get (“address.json",功能(数据){
　　(var=0;我& lt;data.length;我+ +){
　　proHtml +=& # 39; & lt;选项值=https://www.yisu.com/zixun/? +数据[我]。代码+”>“[我]. name + +数据” ';
　　}//初始化省数据
　　$("选择[name=省]").append (proHtml);
　　form.render ();
　　form.on(选择(省),函数(proData) {
　　$("选择[name=区域]")。html(' <选项值=" ">请选择县/区>  0){
　　that.citys(数据($ ().index ()——1] .childs);
　　其他}{
　　$("选择[name=城市]")。attr(“残疾”、“禁用”);
　　}
　　});
　　})
　　}//加载市数据
　　Address.prototype。全市=function(香港){
　　var cityHtml=' value=" "> <选项请选择市>  ' +城市[我]. name + '>  0){
　　that.areas(北京市[$ ().index ()——1] .childs);
　　其他}{
　　$("选择[name=区域]")。attr(“残疾”、“禁用”);
　　}
　　});
　　}//加载县/区数据
　　Address.prototype。区域=函数(地区){
　　var areaHtml=' value=" "> <选项请选择县/区> “[我]. name +地区+” ';
　　}
　　$("选择[name=区域]"). html (areaHtml) .removeAttr(“禁用”);
　　form.render ();
　　}
　　
　　var地址=新地址();
　　出口(“地址”,函数(){
　　address.provinces ();
　　});
　　});

一、下载地址https://pan.baidu.com/s/1bprUQSZ

感谢各位的阅读!关于layui如何实现三级联动就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!