layui怎么实现三级联动
layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){...}”；最后通过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([ 'layer', 'jquery', "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 = '',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>';
}
//初始化省数据
$("select[name=province]").append(proHtml);
form.render();
form.on('select(province)', function (proData) {
$("select[name=area]").html('<option value="">请选择县/区</option>');
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 = '<option value="">请选择市</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");
}
});
}
//加载县/区数据
Address.prototype.areas = function(areas) {
var areaHtml = '<option value="">请选择县/区</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();
});
});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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1677
14
1431
52
1334
25
1280
29
1257
24
Bagaimana untuk mendapatkan data borang dalam layui
Apr 04, 2024 am 03:39 AM
layui menyediakan pelbagai kaedah untuk mendapatkan data borang, termasuk mendapatkan terus semua data medan borang, mendapatkan nilai elemen bentuk tunggal, menggunakan kaedah formAPI.getVal() untuk mendapatkan nilai medan yang ditentukan, menyerikan data borang dan menggunakannya sebagai parameter permintaan AJAX, dan mendengar acara penyerahan Borang mendapat data.
Bagaimana untuk menyediakan lompat pada halaman log masuk layui
Apr 04, 2024 am 03:12 AM
Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.
Bagaimana layui melaksanakan penyesuaian diri
Apr 26, 2024 am 03:00 AM
Susun atur suai boleh dicapai dengan menggunakan fungsi susun atur responsif rangka kerja layui. Langkah-langkahnya termasuk: merujuk rangka kerja layui. Tentukan bekas susun atur penyesuaian dan tetapkan kelas bekas layui. Gunakan titik putus responsif (xs/sm/md/lg) untuk menyembunyikan elemen di bawah titik putus tertentu. Tentukan lebar elemen menggunakan sistem grid (layui-col-). Cipta jarak melalui offset (layui-offset-). Gunakan utiliti responsif (layui-invisible/show/block/inline) untuk mengawal keterlihatan elemen dan cara ia muncul.
Apakah perbezaan antara layui dan vue?
Apr 04, 2024 am 03:54 AM
Perbezaan antara layui dan Vue terutamanya ditunjukkan dalam fungsi dan kebimbangan. Layui memfokuskan pada pembangunan pesat elemen UI dan menyediakan komponen pasang siap untuk memudahkan pembinaan halaman manakala Vue ialah rangka kerja tindanan penuh yang memfokuskan pada pengikatan data, pembangunan komponen dan pengurusan keadaan, dan lebih sesuai untuk membina aplikasi yang kompleks. Layui mudah dipelajari dan sesuai untuk membina halaman dengan cepat; Vue mempunyai keluk pembelajaran yang curam tetapi membantu membina aplikasi berskala dan mudah diselenggara. Bergantung pada keperluan projek dan tahap kemahiran pembangun, rangka kerja yang sesuai boleh dipilih.
Apakah bahasa kerangka layui?
Apr 04, 2024 am 04:39 AM
Rangka kerja layui ialah rangka kerja bahagian hadapan berasaskan JavaScript yang menyediakan satu set komponen dan alatan UI yang mudah digunakan untuk membantu pembangun membina aplikasi web responsif dengan cepat. Ciri-cirinya termasuk: modular, ringan, responsif dan mempunyai dokumentasi lengkap dan sokongan komuniti. layui digunakan secara meluas dalam pembangunan sistem backend pengurusan, laman web e-dagang, dan aplikasi mudah alih. Kelebihannya ialah permulaan yang cepat, kecekapan yang dipertingkatkan, dan penyelenggaraan yang mudah Kelemahannya ialah penyesuaian yang lemah dan kemas kini teknologi yang perlahan.
Apakah maksud layui?
Apr 04, 2024 am 04:33 AM
layui ialah rangka kerja UI bahagian hadapan yang menyediakan pelbagai komponen, alatan dan fungsi UI untuk membantu pembangun membina aplikasi web moden, responsif dan interaktif dengan cepat penyesuaian. Ia digunakan secara meluas dalam pembangunan pelbagai aplikasi web, termasuk sistem pengurusan, platform e-dagang, sistem pengurusan kandungan, rangkaian sosial dan aplikasi mudah alih.
Bagaimana untuk memindahkan data dalam layui
Apr 26, 2024 am 03:39 AM
Kaedah menggunakan layui untuk menghantar data adalah seperti berikut: Gunakan Ajax: Cipta objek permintaan, tetapkan parameter permintaan (URL, kaedah, data), dan proses respons. Gunakan kaedah terbina dalam: Permudahkan pemindahan data menggunakan kaedah terbina dalam seperti $.post, $.get, $.postJSON atau $.getJSON.
Apakah teknologi berasaskan layui?
Apr 28, 2024 pm 09:48 PM
Layui berdasarkan teknologi HTML, CSS, JavaScript, jQuery, Less dan Grunt serta menawarkan keserasian merentas pelayar, kebolehsesuaian tinggi, kemudahan penggunaan, komponen yang kaya dan sokongan komuniti yang aktif.
