使用js实现一个地址的三级联动

        大家好，我是小编，这是我最近弄的一个使用js实现的三级联动，希望可以帮到想要实现的人，好了废话不多说，进入正题：

首先，你要导入一些文件：

<link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="http://hovertree.com/texiao/bootstrap/4/css/city-picker.css" rel="stylesheet" type="text/css" />
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
    <script src="http://hovertree.com/ziyuan/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.data.js"></script>
    <script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.js"></script>
    <script src="http://hovertree.com/texiao/bootstrap/4/js/main.js"></script>

接下来就是显示的问题了

<div class="container">
        <div class="docs-methods">
            <form class="form-inline">
                <div id="distpicker">
                    <div class="form-group">
                        <div style="position: relative;">
                            <input id="city-picker3" class="form-control" readonly type="text" value="" data-toggle="city-picker">
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-warning" id="reset" type="button">重置</button>
                        <button class="btn btn-danger" id="destroy" type="button">确定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

然后简简单单的三级联动的功能就可以实现在你的页面上了