layui省市县多级联动
之前学习js的时候写省市县联动都是爬别人网站的数据，再自己实现联动的。本篇重点不是介绍爬取省市县数据，更不介绍联动的逻辑。
主要介绍layui实现省市县多级联动的快速实现方法之一。
这里使用到一个省市县联动的一个库，Distpicker ，具体这玩意怎么使用，点开链接看一下文档，超级超级超级简单，这里不赘述。所以呢，如果你不是用layui框架做省市县联动，就用这个库，分分钟一个demo就出来了。
重点来了，这个库适配layui，就会出现一个问题。layui会把select和option渲染成多个div，而Distpicker单纯是对select和option操作的，一旦layui渲染完成，Distpicker库对select再怎么操作，渲染后的div都不会有任何改变。
下面，我细致分析一下layui适配Distpicker产生的问题：
1.layui渲染完成后，用户点击省级（或市级）select，实际上只是点击了渲染后的div，所以，库监听的select点击事件根本不会被触发。所以市级（或县级）select，并没有被填充option数据；
2.即使解决了问题1，库填充了option到select里，layui不进行再次渲染用户依然看不到联动的数据。
解决方案：
针对问题1：layui提供了方法监听渲染后的select（实际是div）的change事件，当用户点击触发该事件时，我们用代码再去触发被渲染前的select的change事件，让Distpicker库也知道，用户改变了select的值。Distpicker再对select中填充option。
针对问题2：layui提供了相应的方法去再次渲染表单，即form.render()。这个方法也放在渲染后的select的change事件响应后执行。
下面贴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>
代码写的蹩脚，不喜勿喷。
