search

Home >Web Front-end >Layui Tutorial >How to implement three-level linkage in layui

How to implement three-level linkage in layui

藏色散人
藏色散人Original
2020-11-20 10:09:375793browse

layui's method of implementing three-level linkage: first create an html page; then create an [address.js] file with the content "Address.prototype.provinces = function(){...}"; and finally pass The layui module can implement three-level linkage.

How to implement three-level linkage in layui

The operating environment of this tutorial: Windows 10 system, layui version 2.5.6, Dell G3 computer.

Three-level linkage module based on layui

The page code of html is as follows: 

<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>

The code of address.js is as follows: 

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();
    });
});

The download address of address.json is as follows:

1. Download address https://pan.baidu.com/s/1bprUQSZ

2. Download address https://download .csdn.net/download/sundy_fly/10149270

Recommended: "layUI Tutorial"

The above is the detailed content of How to implement three-level linkage in layui. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How layui gets the value of the checkbox and how to assign a value to the checkboxNext article：How layui gets the value of the checkbox and how to assign a value to the checkbox

Related articles

See more