layui如何实现三级联动-创新互联
这篇文章给大家分享的是有关layui如何实现三级联动的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联专注于东西湖网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供东西湖营销型网站建设,东西湖网站制作、东西湖网页设计、东西湖网站官网定制、微信小程序定制开发服务,打造东西湖网络公司原创品牌,更为您提供东西湖网站排名全网营销落地服务。layui实现三级联动的方法:首先创建html的页面;然后创建address.js文件,内容为“Address.prototype.provinces = function(){...}”;最后通过layui模块实现三级联动即可。
基于layui的三级联动模块
1.html的页面代码如下:
2.address.js的代码入下:
ps:需要注意的有: $.get("address.json", function (data) {} 的地址为json地址,地址不对会报异常。 layui.define(["form","jquery"],function(exports){ var form = layui.form, $ = layui.jquery, Address = function(){}; Address.prototype.provinces = function() { //加载省数据 var proHtml = '',that = this; $.get("address.json", function (data) { for (var i = 0; i < data.length; i++) { proHtml += ''; } //初始化省数据 $("select[name=province]").append(proHtml); form.render(); form.on('select(province)', function (proData) { $("select[name=area]").html(''); var value = proData.value; if (value > 0) { that.citys(data[$(this).index() - 1].childs); } else { $("select[name=city]").attr("disabled", "disabled"); } }); }) } //加载市数据 Address.prototype.citys = function(citys) { var cityHtml = '',that = this; for (var i = 0; i < citys.length; i++) { cityHtml += ''; } $("select[name=city]").html(cityHtml).removeAttr("disabled"); form.render(); form.on('select(city)', function (cityData) { var value = cityData.value; if (value > 0) { that.areas(citys[$(this).index() - 1].childs); } else { $("select[name=area]").attr("disabled", "disabled"); } }); } //加载县/区数据 Address.prototype.areas = function(areas) { var areaHtml = ''; for (var i = 0; i < areas.length; i++) { areaHtml += ''; } $("select[name=area]").html(areaHtml).removeAttr("disabled"); form.render(); } var address = new Address(); exports("address",function(){ address.provinces(); }); });
3.address.json的下载地址如下:
一、下载地址https://pan.baidu.com/s/1bprUQSZ
感谢各位的阅读!关于layui如何实现三级联动就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
分享名称:layui如何实现三级联动-创新互联
分享链接:http://myzitong.com/article/dsoids.html