本文链接：https://blog.csdn.net/yxk17668/article/details/104748973

这是一个简单基于Bootstrap省市区三级联动菜单，数据源可以修改通过修改javascript

html：

                                <div class="modal-body">
                                    <!-- 省市区三级联动 begin -->
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><i>*</i>所在地址</label>
                                        <div class="col-sm-3">
                                            <select name="input_province" id="input_province" class="form-control" >
                                                <option value="">--请选择--</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3">
                                            <select name="input_city" id="input_city" class="form-control">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3">
                                            <select name="input_area" id="input_area" class="form-control">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- 省市区三级联动 end-->
                                </div>

javascript：

<!-- 三级联动 begin -->
<script type="text/javascript" src="<%=basePath%>resource/assets/js/address.js"></script>
<script >
    function address() {
        var html = "";
        $("#input_city").append(html);
        $("#input_area").append(html);
        $.each(pdata,function(idx,item){
            if (parseInt(item.level) == 0) {
                html += "<option value="+item.code+" >"+ item.names +"</option> ";
            }
        });
        $("#input_province").append(html);

        $("#input_province").change(function(){
            if ($(this).val() == "") return;
            $("#input_city option").remove();
            $("#input_area option").remove();
            //var code = $(this).find("option:selected").attr("exid");
            var code = $(this).find("option:selected").val();
            code = code.substring(0,2);
            var html = "<option value=''>--请选择--</option>";
            $("#input_area option").append(html);
            $.each(pdata,function(idx,item){
                if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
                    html +="<option value="+item.code+" >"+ item.names +"</option> ";
                }
            });
            $("#input_city ").append(html);
        });

        $("#input_city").change(function(){
            if ($(this).val() == "") return;
            $("#input_area option").remove();
            var code = $(this).find("option:selected").val();
            code = code.substring(0,4);
            var html = "<option value=''>--请选择--</option>";
            $.each(pdata,function(idx,item){
                if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
                    html +="<option value="+item.code+" >"+ item.names +"</option> ";
                }
            });
            $("#input_area ").append(html);
        });
    }
</script>
<!-- 三级联动 end -->