页面三个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);}});}});}
}

转载于:https://www.cnblogs.com/llcdbk/p/10494365.html

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

html js 如何判断页面是第一次访问还是重复刷新访问,使用JS判断页面是首次被加载还是刷新...
1 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用) if(window.name == ""){ console.log("首次被加 ...
JS window对象返回前一个浏览的页面 back()方法，加载 history 列表中的前一个 URL。语法： window.history.back();...
返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.hi ...
c#winform窗口页面一打开就加载的方法
//页面一打开就加载这个方法this.Load += new EventHandler(SQLGetTime_Load); 文本框设置默认值,一打开就显示 private String text1 = ...
webpack多页面开发与懒加载hash解决方案
webpack多页面开发与懒加载hash解决方案参考文章: (1)webpack多页面开发与懒加载hash解决方案 (2)https://www.cnblogs.com/ihardcoder/p/5 ...
/common/nlp/data/dictionary/CoreNatureDictionary.mini.txt加载失败
核心词典/common/nlp/data/dictionary/CoreNatureDictionary.mini.txt加载失败原因:配置文件中的hdfs路径未被识别 root=hdfs://my ...
页面优化之懒加载与预加载
1.前言 PC端网速较快,现在普通都是百兆宽带,那么折算一下就是10M/s的下载速度,基本上资源如果在10M以内的话加载还是比较快的. 但是移动端就不行了.移动端需要消耗巨额的流量,所以尽量减少移动端 ...
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了: keep-aliv ...
jQuery：等页面DOM加载完毕后再执行代码
等着页面DOM加载完毕后再执行代码第一种方式(比较麻烦,不常用): $(document).ready(function(){ - }) 第二种方式(常用): $(function(){ - }) ...
SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法首屏加载计算首屏加载时间公式解决方法减少入口文件体积静态资源本地缓存 UI框架按需加载避免组件重复打包图片资源压缩开启GZip压缩首屏加载首屏加 ...
js跳转新页面，指定div加载新页面
1.在当前页面上跳转新页面 window.open('#要载入的界面'); window.open('graphReportController.do?list&id=dzdxz'); win ...

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

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

最新文章

热门文章