집

웹 프론트엔드

레이이 튜토리얼

Layui에서 3단계 연결을 구현하는 방법

藏色散人

Nov 20, 2020 am 10:09 AM

layui

layui가 3단계 연결을 구현하는 방법: 먼저 html 페이지를 만든 다음 "Address.prototype.provinces = function(){...}" 콘텐츠로 [address.js] 파일을 만듭니다. Layui 모듈을 통한 레벨 연동 그냥 캐스케이드 방식으로 이동하세요.

Layui에서 3단계 연결을 구현하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템,layui 버전 2.5.6, Dell G3 컴퓨터.

layui 기반의 3단계 연계 모듈

html 페이지 코드는 다음과 같습니다.

<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="">请选择省</option>
				</select>
			</p>
			<p class="layui-input-inline">
				<select name="city" lay-filter="city" disabled>
					<option value="">请选择市</option>
				</select>
			</p>
			<p class="layui-input-inline">
				<select name="area" lay-filter="area" disabled>
					<option value="">请选择县/区</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([ &#39;layer&#39;, &#39;jquery&#39;, "address" ], function() {
			var layer = layui.layer, $ = layui.jquery, address = layui.address();

		});
	</script>
<html>

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 = &#39;&#39;,that = this;
        $.get("address.json", function (data) {
            for (var i = 0; i < data.length; i++) {
                proHtml += &#39;<option value="&#39; + data[i].code + &#39;">&#39; + data[i].name + &#39;</option>&#39;;
            }
            //初始化省数据
            $("select[name=province]").append(proHtml);
            form.render();
            form.on(&#39;select(province)&#39;, function (proData) {
                $("select[name=area]").html(&#39;<option value="">请选择县/区</option>&#39;);
                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 = &#39;<option value="">请选择市</option>&#39;,that = this;
        for (var i = 0; i < citys.length; i++) {
            cityHtml += &#39;<option value="&#39; + citys[i].code + &#39;">&#39; + citys[i].name + &#39;</option>&#39;;
        }
        $("select[name=city]").html(cityHtml).removeAttr("disabled");
        form.render();
        form.on(&#39;select(city)&#39;, 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 = &#39;<option value="">请选择县/区</option>&#39;;
        for (var i = 0; i < areas.length; i++) {
            areaHtml += &#39;<option value="&#39; + areas[i].code + &#39;">&#39; + areas[i].name + &#39;</option>&#39;;
        }
        $("select[name=area]").html(areaHtml).removeAttr("disabled");
        form.render();
    }

    var address = new Address();
    exports("address",function(){
        address.provinces();
    });
});