這篇文章給大家分享的是有關(guān)layui如何實(shí)現(xiàn)三級聯(lián)動的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)公司已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計、始興網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

layui實(shí)現(xiàn)三級聯(lián)動的方法：首先創(chuàng)建html的頁面；然后創(chuàng)建address.js文件，內(nèi)容為“Address.prototype.provinces = function(){...}”；最后通過layui模塊實(shí)現(xiàn)三級聯(lián)動即可。

基于layui的三級聯(lián)動模塊

1.html的頁面代碼如下：

	
		
		
		
		
		
		
		
		
	
	
		

			

				
					請選擇省
				
			
			

				
					請選擇市
				
			
			

				
					請選擇縣/區(qū)
				
			
		

	
	
	
	

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() {
        //加載省數(shù)據(jù)
        var proHtml = '',that = this;
        $.get("address.json", function (data) {
            for (var i = 0; i < data.length; i++) {
                proHtml += '' + data[i].name + '';
            }
            //初始化省數(shù)據(jù)
            $("select[name=province]").append(proHtml);
            form.render();
            form.on('select(province)', function (proData) {
                $("select[name=area]").html('請選擇縣/區(qū)');
                var value = proData.value;
                if (value > 0) {
                    that.citys(data[$(this).index() - 1].childs);
                } else {
                    $("select[name=city]").attr("disabled", "disabled");
                }
            });
        })
    }

    //加載市數(shù)據(jù)
    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");
            }
        });
    }

    //加載縣/區(qū)數(shù)據(jù)
    Address.prototype.areas = function(areas) {
        var areaHtml = '請選擇縣/區(qū)';
        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

感謝各位的閱讀！關(guān)于layui如何實(shí)現(xiàn)三級聯(lián)動就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！