之前學(xué)習(xí)js的時候?qū)懯∈锌h聯(lián)動都是爬別人網(wǎng)站的數(shù)據(jù)预明，再自己實現(xiàn)聯(lián)動的。本篇重點不是介紹爬取省市縣數(shù)據(jù)有咨，更不介紹聯(lián)動的邏輯。
主要介紹layui實現(xiàn)省市縣多級聯(lián)動的快速實現(xiàn)方法之一验毡。
這里使用到一個省市縣聯(lián)動的一個庫，Distpicker 帝嗡，具體這玩意怎么使用晶通，點開鏈接看一下文檔，超級超級超級簡單哟玷，這里不贅述狮辽。所以呢，如果你不是用layui框架做省市縣聯(lián)動巢寡，就用這個庫喉脖，分分鐘一個demo就出來了。
重點來了抑月，這個庫適配layui动看，就會出現(xiàn)一個問題。layui會把select和option渲染成多個div爪幻，而Distpicker單純是對select和option操作的菱皆，一旦layui渲染完成，Distpicker庫對select再怎么操作挨稿，渲染后的div都不會有任何改變仇轻。
下面，我細(xì)致分析一下layui適配Distpicker產(chǎn)生的問題：
1.layui渲染完成后奶甘，用戶點擊省級（或市級）select篷店，實際上只是點擊了渲染后的div，所以臭家，庫監(jiān)聽的select點擊事件根本不會被觸發(fā)疲陕。所以市級（或縣級）select，并沒有被填充option數(shù)據(jù)钉赁；
2.即使解決了問題1蹄殃，庫填充了option到select里，layui不進行再次渲染用戶依然看不到聯(lián)動的數(shù)據(jù)你踩。
解決方案：
針對問題1：layui提供了方法監(jiān)聽渲染后的select（實際是div）的change事件诅岩，當(dāng)用戶點擊觸發(fā)該事件時，我們用代碼再去觸發(fā)被渲染前的select的change事件带膜，讓Distpicker庫也知道吩谦，用戶改變了select的值。Distpicker再對select中填充option膝藕。
針對問題2：layui提供了相應(yīng)的方法去再次渲染表單式廷，即form.render()。這個方法也放在渲染后的select的change事件響應(yīng)后執(zhí)行芭挽。
下面貼demo代碼:
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="dist/distpicker.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline" data-toggle="distpicker">
<select lay-filter="a" id="a"></select>
<select lay-filter="b" id="b"></select>
<select lay-filter="c" id="c"></select>
</div>
</div>
</form>
<script src="layui/layui.js"></script>
<script>
layui.use(['form'], function () {
var $ = layui.$
, form = layui.form;
form.on('select(a)', function (data) {
$("#a").val(data.value).change();
form.render();
})
form.on('select(b)', function (data) {
$("#b").val(data.value).change();
form.render();
})
form.on('select(c)', function (data) {
$("#c").val(data.value).change();
form.render();
})
})
</script>
</body>
</html>
代碼寫的蹩腳滑废，不喜勿噴蝗肪。
