layui搭配Distpicker实现省市县多级联动

一、下载Distpicker，将dist下的目录拷贝到静态资源下

前端代码：

 <div class="layui-input-inline">
<select name="province" lay-filter="province" id="province" data-province="- 省/自治区/直辖市 -" ></select>
</div>
<div class="layui-input-inline">
<select name="city" lay-filter="city" id="city"  data-city="- 市/区/县 -"></select>
</div>

重点来了，这个库适配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事件响应后执行。

解决问题的js代码

  form.on('select(province)', function (data) {
            $("#province").val(data.value).change();
            form.render();
        })

        form.on('select(city)', function (data) {
            $("#city").val(data.value).change();
            form.render();
        })

参考文章