页面三个txt加载联动省市县的代码，类似淘宝的收货地址的布局

页面三个txt加载联动省市县的代码，假如有一个树形的JSON，分别显示的省市县
这时候三个TXT怎么做联动效果呢，这里用framework7为例
HTML:

 

<div class="list-block" style=" margin-top: 43px;">
            <ul>
                <li>
                    <!-- Additional "smart-select" class -->
                    <a href="#" class="item-link smart-select province-sel">
                        <!-- select -->
                        <select name="user_province"></select>
                        <div class="item-content">
                            <div class="item-inner">
                                <!-- Select label -->
                                <div class="item-title">省份</div>
                                <!-- Selected value, not required -->
                                <div class="item-after txt_user_province">请选择</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <!-- Additional "smart-select" class -->
                    <a href="#" class="item-link smart-select city-sel">
                        <!-- select -->
                        <select name="user_city"></select>
                        <div class="item-content">
                            <div class="item-inner">
                                <!-- Select label -->
                                <div class="item-title">城市</div>
                                <!-- Selected value, not required -->
                                <div class="item-after txt_user_city">请选择</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <!-- Additional "smart-select" class -->
                    <a href="#" class="item-link smart-select area-sel">
                        <!-- select -->
                        <select name="user_area">
                        </select>
                        <div class="item-content">
                            <div class="item-inner">
                                <!-- Select label -->
                                <div class="item-title">区县</div>
                                <!-- Selected value, not required -->
                                <div class="item-after txt_user_area">请选择</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <textarea id="txtarea_userAddress" placeholder="请输入地址详细信息"></textarea>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        

页面开始先加载第一个省和第一个省的第一个市和第一个市的第一个县
这里可以使用递归的方法有兴趣的同学可以花时间写一下




js:

    //一次加载所有省市区信息（初始化）
function GetUserAddressByITInfo() {
    myApp.showIndicator();
    $.post("/Default/GetUserAddressByITInfo", {}, function (data) {
        myApp.hideIndicator();
        if (data) {
            var pOptHmtl = '';
            var cOptHmtl = '';
            var aOptHmtl = '';
            //获取的数据放入全局变量充当缓存
            userAddressByItArray = data.userAddrList;
            //循环省级节点
            $.each(data.userAddrList, function (pIndex, pValue) {
                pOptHmtl += '<option value="' + pValue.ProvinceName + '">' + pValue.ProvinceName + '</option>';
                //第一个节点获取一下
                if (pIndex == 0) {
                    //根据一级节点循环绑定下面的二级市节点
                    $('.txt_user_province').text(pValue.ProvinceName);
                    $.each(pValue.CityNameList, function (cIndex, cValue) {
                        cOptHmtl += '<option value="' + cValue.CityName + '">' + cValue.CityName + '</option>';
                        if (cIndex == 0) {
                            //第一个市节点获取一下，根据这个循环绑定下面的区县节点
                            $('.txt_user_city').text(cValue.CityName);
                            $.each(cValue.AreaNameList, function (aIndex, aValue) {
                                aOptHmtl += '<option value="' + aValue.AreaName + '">' + aValue.AreaName + '</option>';
                                if (aIndex == 0) {
                                    $('.txt_user_area').text(aValue.AreaName);
                                }
                            });
                            $('select[name="user_area"]').html(aOptHmtl);
                        }
                    });
                    $('select[name="user_city"]').html(cOptHmtl);
                }
            });
            $('select[name="user_province"]').html(pOptHmtl);
        }
    });
}

//然后省点击后触发select标签的change事件找到下面的市
//根据省份选择市
function GetCityListByProvince() {
    var pOptHmtl = '';
    var cOptHmtl = '';
    var aOptHmtl = '';
    var selProvince = $('select[name="user_province"] option:selected').val();
    if (userAddressByItArray) {
        //当select省级标签发生改变的时候，从一开始加载页面的数组去读取和新选中的项一样的树节点
        $.each(userAddressByItArray, function (pIndex, pValue) {
            if (selProvince == pValue.ProvinceName) {
                $('.txt_user_province').text(pValue.ProvinceName);
                //然后根据这个树节点从新加载二级市的节点
                $.each(pValue.CityNameList, function (cIndex, cValue) {
                    cOptHmtl += '<option value="' + cValue.CityName + '">' + cValue.CityName + '</option>';
                    if (cIndex == 0) {
                        //同样的绑定第一个市的区县节点
                        $('.txt_user_city').text(cValue.CityName);
                        $.each(cValue.AreaNameList, function (aIndex, aValue) {
                            aOptHmtl += '<option value="' + aValue.AreaName + '">' + aValue.AreaName + '</option>';
                            if (aIndex == 0) {
                                $('.txt_user_area').text(aValue.AreaName);
                            }
                        });
                        $('select[name="user_area"]').html(aOptHmtl);
                    }
                });
                $('select[name="user_city"]').html(cOptHmtl);
            }
        });
    } else {
        $.post("/Default/GetUserAddressByITInfo", {}, function (data) {
            if (data) {
                $.each(data.userAddrList, function (pIndex, pValue) {
                    if (selProvince == pValue.ProvinceName) {
                        $('.txt_user_province').text(pValue.ProvinceName);
                        $.each(pValue.CityNameList, function (cIndex, cValue) {
                            cOptHmtl += '<option value="' + cValue.CityName + '">' + cValue.CityName + '</option>';
                            if (cIndex == 0) {
                                $('.txt_user_city').text(cValue.CityName);
                                $.each(cValue.AreaNameList, function (aIndex, aValue) {
                                    aOptHmtl += '<option value="' + aValue.AreaName + '">' + aValue.AreaName + '</option>';
                                    if (aIndex == 0) {
                                        $('.txt_user_area').text(aValue.AreaName);
                                    }
                                });
                                $('select[name="user_area"]').html(aOptHmtl);
                            }
                        });
                        $('select[name="user_city"]').html(cOptHmtl);
                    }
                });
            }
        });
    }
}

//市点击后触发select的change事件找到下面的区县
//根据省市选择区
function GetAreaListByCity() {
    var pOptHmtl = '';
    var cOptHmtl = '';
    var aOptHmtl = '';
    var selProvince = $('select[name="user_province"] option:selected').val();
    var selCity = $('select[name="user_city"] option:selected').val();
    if (userAddressByItArray) {
        //当select市级标签发生改变的时候，从一开始加载页面的数组去读取和新选中的项一样的树节点，然后找到省和市一样的那个节点
        $.each(userAddressByItArray, function (pIndex, pValue) {
            //先确定省级
            if (selProvince == pValue.ProvinceName) {
                $('.txt_user_province').text(pValue.ProvinceName);
                //然后根据这个树节点从新加载二级市的节点
                $.each(pValue.CityNameList, function (cIndex, cValue) {
                    cOptHmtl += '<option value="' + cValue.CityName + '">' + cValue.CityName + '</option>';
                    //在确定省级下面的市级
                    if (selCity == cValue.CityName) {
                        //同样的绑定第一个市的区县节点
                        $('.txt_user_city').text(cValue.CityName);
                        $.each(cValue.AreaNameList, function (aIndex, aValue) {
                            //再根据这个当前的市节点重新加载三级区县节点
                            aOptHmtl += '<option value="' + aValue.AreaName + '">' + aValue.AreaName + '</option>';
                            if (aIndex == 0) {
                                $('.txt_user_area').text(aValue.AreaName);
                            }
                        });
                        $('select[name="user_area"]').html(aOptHmtl);
                    }
                });
                $('select[name="user_city"]').html(cOptHmtl);
            }
        });
    } else {
        $.post("/Default/GetUserAddressByITInfo", {}, function (data) {
            if (data) {
                $.each(data.userAddrList, function (pIndex, pValue) {
                    //先确定省级
                    if (selProvince == pValue.ProvinceName) {
                        $('.txt_user_province').text(pValue.ProvinceName);
                        //然后根据这个树节点从新加载二级市的节点
                        $.each(pValue.CityNameList, function (cIndex, cValue) {
                            cOptHmtl += '<option value="' + cValue.CityName + '">' + cValue.CityName + '</option>';
                            //在确定省级下面的市级
                            if (selCity == cValue.CityName) {
                                //同样的绑定第一个市的区县节点
                                $('.txt_user_city').text(cValue.CityName);
                                $.each(cValue.AreaNameList, function (aIndex, aValue) {
                                    //再根据这个当前的市节点重新加载三级区县节点
                                    aOptHmtl += '<option value="' + aValue.AreaName + '">' + aValue.AreaName + '</option>';
                                    if (aIndex == 0) {
                                        $('.txt_user_area').text(aValue.AreaName);
                                    }
                                });
                                $('select[name="user_area"]').html(aOptHmtl);
                            }
                        });
                        $('select[name="user_city"]').html(cOptHmtl);
                    }
                });
            }
        });
    }
}