省市县三级联动插件distpicker

新入行，前端代码写的一塌糊涂，不仅写得差，最要命的是写的慢，特记录下以后需要使用的一下插件，特别是一些坑，方便调用
文件引入：项目是思途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

最后运行成功