溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

layui如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)

發(fā)布時(shí)間：2020-11-20 11:36:15 來源：億速云 閱讀：210 作者：小新 欄目：web開發(fā)

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

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

基于layui的三級(jí)聯(lián)動(dòng)模塊

1.html的頁(yè)面代碼如下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../../../layui-v2.1.5/css/layui.css" />
	</head>
	<body>
		<p class="layui-form">
			<p class="layui-input-inline">
				<select name="province" lay-filter="province" class="province">
					<option value="">請(qǐng)選擇省</option>
				</select>
			</p>
			<p class="layui-input-inline">
				<select name="city" lay-filter="city" disabled>
					<option value="">請(qǐng)選擇市</option>
				</select>
			</p>
			<p class="layui-input-inline">
				<select name="area" lay-filter="area" disabled>
					<option value="">請(qǐng)選擇縣/區(qū)</option>
				</select>
			</p>
		</p>
	</body>
	<script type="text/javascript" src="../../../layui-v2.1.5/layui.js"></script>
	<script type="text/javascript" src="address.js"></script>
	<script type="text/javascript">
		layui.config({
			base : "../../../js/" //address.js的路徑
		}).use([ 'layer', 'jquery', "address" ], function() {
			var layer = layui.layer, $ = layui.jquery, address = layui.address();

		});
	</script>
<html>

2.address.js的代碼入下：

ps:需要注意的有：	$.get("address.json", function (data) {} 的地址為json地址，地址不對(duì)會(huì)報(bào)異常。
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 += '<option value="' + data[i].code + '">' + data[i].name + '</option>';
            }
            //初始化省數(shù)據(jù)
            $("select[name=province]").append(proHtml);
            form.render();
            form.on('select(province)', function (proData) {
                $("select[name=area]").html('<option value="">請(qǐng)選擇縣/區(qū)</option>');
                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 = '<option value="">請(qǐng)選擇市</option>',that = this;
        for (var i = 0; i < citys.length; i++) {
            cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>';
        }
        $("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 = '<option value="">請(qǐng)選擇縣/區(qū)</option>';
        for (var i = 0; i < areas.length; i++) {
            areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>';
        }
        $("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)三級(jí)聯(lián)動(dòng)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手