LayUI的使用
1 、引用
1、下載：官網(wǎng)：https://www.layui.com
2、使用方法：直接將解壓好的壓縮包拖拽到項(xiàng)目?jī)?nèi)
將以下導(dǎo)入到html中：
|
1
2
|
<link rel="stylesheet" href="/自己的地址/./layui/css/layui.css" rel="external nofollow" media="all"><script type="text/javascript" src="../自己的地址+/layui/layui.js"></script> |
2、輸出： hello world
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></script> <!-- 直接將解壓的文件輔助到項(xiàng)目 然后導(dǎo)入layui.css和layui.js --> <script type="text/javascript" src="../day/layui/css/layui.css"></script> <script type="text/javascript" src="../day/layui/layui.js"></script> <!--提示：如果是采用非模塊化方式（最下面有講解），此處可換成：./layui/layui.all.js --> <script type="text/javascript" src="./layui/layui.all.js"></script></head><body> <script> // layui.use(['layer', 'form'], function(){ // var layer = layui.layer // ,form = layui.form; // layer.msg('Hello World'); // }); $(function(){ layer.msg('Hello World'); }) </script> </body></html> |
3、基于layui三級(jí)聯(lián)動(dòng)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>基于 Layui form 組件的省市區(qū)聯(lián)動(dòng)選擇的實(shí)現(xiàn)</title> <script type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></script> <link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/css/layui.css"></script> <script type="text/javascript" src="layui/layui.js"></script> <script type="text/javascript" src="./data.js"></script> <script type="text/javascript" src="/province.js"></script> <script type="text/javascript"> var defaults = { s1: 'provid', s2: 'cityid', s3: 'areaid', v1: null, v2: null, v3: null }; </script></head><body> <div style="width:800px;margin:50px auto;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">選擇地區(qū)</label> <div class="layui-input-inline"> <select name="provid" id="provid" lay-filter="provid"> <option value="">請(qǐng)選擇省</option> </select> </div> <div class="layui-input-inline"> <select name="cityid" id="cityid" lay-filter="cityid"> <option value="">請(qǐng)選擇市</option> </select> </div> <div class="layui-input-inline"> <select name="areaid" id="areaid" lay-filter="areaid"> <option value="">請(qǐng)選擇縣/區(qū)</option> </select> </div> </div> </form> </div></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
province.jsvar defaults = { s1: 'provid', s2: 'cityid', s3: 'areaid', v1: null, v2: null, v3: null};var $form;var form;var $;layui.define(['jquery', 'form'], function () { $ = layui.jquery; form = layui.form; $form = $('form'); treeSelect(defaults);});function treeSelect(config) { config.v1 = config.v1 ? config.v1 : 110000; config.v2 = config.v2 ? config.v2 : 110100; config.v3 = config.v3 ? config.v3 : 110101; $.each(threeSelectData, function (k, v) { appendOptionTo($form.find('select[name=' + config.s1 + ']'), k, v.val, config.v1); }); form.render(); cityEvent(config); areaEvent(config); form.on('select(' + config.s1 + ')', function (data) { cityEvent(data); form.on('select(' + config.s2 + ')', function (data) { areaEvent(data); }); }); function cityEvent(data) { $form.find('select[name=' + config.s2 + ']').html(""); config.v1 = data.value ? data.value : config.v1; $.each(threeSelectData, function (k, v) { if (v.val == config.v1) { if (v.items) { $.each(v.items, function (kt, vt) { appendOptionTo($form.find('select[name=' + config.s2 + ']'), kt, vt.val, config.v2); }); } } }); form.render(); config.v2 = $('select[name=' + config.s2 + ']').val(); areaEvent(config); } function areaEvent(data) { $form.find('select[name=' + config.s3 + ']').html(""); config.v2 = data.value ? data.value : config.v2; $.each(threeSelectData, function (k, v) { if (v.val == config.v1) { if (v.items) { $.each(v.items, function (kt, vt) { if (vt.val == config.v2) { $.each(vt.items, function (ka, va) { appendOptionTo($form.find('select[name=' + config.s3 + ']'), ka, va, config.v3); }); } }); } } }); form.render(); form.on('select(' + config.s3 + ')', function (data) { }); } function appendOptionTo($o, k, v, d) { var $opt = $("<option>").text(k).val(v); if (v == d) { $opt.attr("selected", "selected") } $opt.appendTo($o); }}=======================================================================================data數(shù)據(jù)var threeSelectData={"北京":{val:"110000",items:{"北京":{val:"110100",items:{"東城區(qū)":"110101","西城區(qū)":"110102","崇文區(qū)":"110103","宣武區(qū)":"110104","朝陽(yáng)區(qū)":"110105","豐臺(tái)區(qū)":"110106","石景山區(qū)":"110107","海淀區(qū)":"110108","門頭溝區(qū)":"110109","房山區(qū)":"110111","通州區(qū)":"110112","順義區(qū)":"110113","昌平區(qū)":"110114","大興區(qū)":"110115","懷柔區(qū)":"110116","平谷區(qū)":"110117","密云縣":"110228","延慶縣":"110229"}}}} |
總結(jié)
到此這篇關(guān)于layui使用及簡(jiǎn)單的三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)layui使用及三級(jí)聯(lián)動(dòng)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_45289374/article/details/110405331
