新入行，前端代码写的一塌糊涂，不仅写得差，最要命的是写的慢，特记录下以后需要使用的一下插件，特别是一些坑，方便调用
文件引入：项目是思途cms，可以我直接把这个js复制到思途的js文件里了，直接引用即可

{Common::js('distpicker.js')}

html代码：从这里可以看到我使用了前端layui插件，这里有个坑先记着

<div data-toggle="distpicker"><div class="layui-input-inline" style="width:30%"><label class="layui-form-label">省：</label><div class="layui-input-block"><input type="hidden" id="province" value="{$info['province']}"><select lay-filter="eprovinceName" id="eprovinceName"  name="provinceName" value="{$info['province']}"></select></div></div><div class="layui-input-inline" style="width:30%"><label class="layui-form-label">市：</label><div class="layui-input-block"><input type="hidden" id="city" value="{$info['city']}"><select lay-filter="ecityName" id="ecityName"  name="cityName"></select></div></div><div class="layui-input-inline" style="width:30%"><label class="layui-form-label">区：</label><div class="layui-input-block"><input type="hidden" id="count" value="{$info['count']}"><select lay-filter="edistrictName" id="edistrictName"  name="districtName"></select></div></div></div>

原则上讲，上面的html代码就可以完成三级联动了，但是我引入以后发现只有第一级省可以选，后面的2级无法显示
原因：这个js与layui.js里面有冲突，layui.js将联动部分禁掉了，需要在js手动渲染出来
js代码：

                   <script>form.on('select(eprovinceName)',function(data){$("#eprovinceName").val(data.value).change();form.render();})form.on('select(ecityName)',function(data){$("#ecityName").val(data.value).change();form.render();})form.on('select(edistrictName)',function(data){$("#edistrictName").val(data.value).change();form.render();})</script>

到这里，三级联动成功了
还没完，三级联动出来以后，我需要给默认值，按照文档

$(function(){//显示数据库省市区$("#target").distpicker({eprovinceName:$("#province").val(),ecityName:$('#city').val(),edistrictName:$('#count').val(),});})

这里有3个地方需要注意：
1.在设置默认值之前需要下面的代码

$("#target").distpicker('destroy');

2.然后运行发现还是不能显示，查了好久发现需要设置autoSelect属性

autoSelect: true,

3.再来运行发现只能默认选择北京市，又查了好久发现需要禁掉placeholder属性，最坑的是我以为是需要禁掉html里面input框的placeholder属性

placeholder: false

最后运行成功