Tutorial Layui

layui怎么实现三级联动

藏色散人

Nov 20, 2020 am 10:09 AM

layui

layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){...}”；最后通过layui模块实现三级联动即可。

layui怎么实现三级联动

本教程操作环境：windows10系统、layui2.5.6版，Dell G3电脑。

基于layui的三级联动模块

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

address.json的下载地址如下：

一、下载地址https://pan.baidu.com/s/1bprUQSZ

二、下载地址https://download.csdn.net/download/sundy_fly/10149270

推荐：《layUI教程》

Atas ialah kandungan terperinci layui怎么实现三级联动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Bagaimana saya menggunakan modul aliran LAYUI untuk menatal tak terhingga?Mar 18, 2025 pm 01:01 PM

Artikel ini membincangkan menggunakan modul aliran Layui untuk menatal tak terhingga, meliputi persediaan, amalan terbaik, pengoptimuman prestasi, dan penyesuaian untuk pengalaman pengguna yang dipertingkatkan.

Bagaimanakah saya menggunakan modul elemen LAYUI untuk membuat tab, akordion, dan bar kemajuan?Mar 18, 2025 pm 01:00 PM

Butir artikel bagaimana menggunakan modul elemen LAYUI untuk membuat dan menyesuaikan elemen UI seperti tab, akordion, dan bar kemajuan, menonjolkan struktur HTML, permulaan, dan perangkap umum untuk mengelakkan.

Bagaimanakah saya menyesuaikan penampilan dan tingkah laku modul Carousel Layui?Mar 18, 2025 pm 12:59 PM

Artikel ini membincangkan modul Carousel Layui, memberi tumpuan kepada pengubahsuaian CSS dan JavaScript untuk penampilan dan tingkah laku, termasuk kesan peralihan, tetapan autoplay, dan menambah kawalan navigasi tersuai.

Bagaimanakah saya menggunakan modul Carousel Layui untuk membuat slider imej?Mar 18, 2025 pm 12:58 PM

Artikel ini menggunakan modul Carousel Layui untuk slider imej, memperincikan langkah -langkah untuk persediaan, pilihan penyesuaian, melaksanakan autoplay dan navigasi, dan strategi pengoptimuman prestasi.

Bagaimana saya mengkonfigurasi modul muat naik LAYUI untuk menyekat jenis dan saiz fail?Mar 18, 2025 pm 12:57 PM

Artikel ini membincangkan mengkonfigurasi modul muat naik Layui untuk menyekat jenis dan saiz fail menggunakan sifat Accept, Exts, dan Saiz, dan menyesuaikan mesej ralat untuk pelanggaran.

Bagaimanakah saya menggunakan modul Layui's Layer untuk membuat kotak modal dan kotak dialog?Mar 18, 2025 pm 12:46 PM

Artikel ini menerangkan cara menggunakan modul Layui's Layer untuk membuat kotak modal dan kotak dialog, memperincikan persediaan, jenis, penyesuaian, dan perangkap umum untuk dielakkan.

See all articles