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 += '' + data[i].name + '';
            }
            //初始化省数据
            $("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 += '' + citys[i].name + '';
        }
        $("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 += '' + areas[i].name + '';
        }
        $("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://jkwzsj.com/article/dsoids.html