页面三个txt加载联动省市县的代码，假如有一个树形的JSON，分别显示的省市县
这时候三个TXT怎么做联动效果呢，这里用framework7为例HTML:
页面开始先加载第一个省和第一个省的第一个市和第一个市的第一个县
这里可以使用递归的方法有兴趣的同学可以花时间写一下 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 += ''; //第一个节点获取一下 if (pIndex == 0) { //根据一级节点循环绑定下面的二级市节点 $('.txt_user_province').text(pValue.ProvinceName); $.each(pValue.CityNameList, function (cIndex, cValue) { cOptHmtl += ''; if (cIndex == 0) { //第一个市节点获取一下，根据这个循环绑定下面的区县节点 $('.txt_user_city').text(cValue.CityName); $.each(cValue.AreaNameList, function (aIndex, aValue) { aOptHmtl += ''; 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 += ''; if (cIndex == 0) { //同样的绑定第一个市的区县节点 $('.txt_user_city').text(cValue.CityName); $.each(cValue.AreaNameList, function (aIndex, aValue) { aOptHmtl += ''; 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 += ''; if (cIndex == 0) { $('.txt_user_city').text(cValue.CityName); $.each(cValue.AreaNameList, function (aIndex, aValue) { aOptHmtl += ''; 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 += ''; //在确定省级下面的市级 if (selCity == cValue.CityName) { //同样的绑定第一个市的区县节点 $('.txt_user_city').text(cValue.CityName); $.each(cValue.AreaNameList, function (aIndex, aValue) { //再根据这个当前的市节点重新加载三级区县节点 aOptHmtl += ''; 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 += ''; //在确定省级下面的市级 if (selCity == cValue.CityName) { //同样的绑定第一个市的区县节点 $('.txt_user_city').text(cValue.CityName); $.each(cValue.AreaNameList, function (aIndex, aValue) { //再根据这个当前的市节点重新加载三级区县节点 aOptHmtl += ''; if (aIndex == 0) { $('.txt_user_area').text(aValue.AreaName); } }); $('select[name="user_area"]').html(aOptHmtl); } }); $('select[name="user_city"]').html(cOptHmtl); } }); } }); }}