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

页面三个txt加载联动省市县的代码,类似淘宝的收货地址的布局的更多相关文章

  1. vue mint-ui 实现省市区街道4级联动(仿淘宝京东收货地址4级联动)

    demo及源码地址 https://github.com/artiely/citypicker 先去下载一个“省份.城市.区县.乡镇” 四级联动数据,然后 引入 import { Picker } f ...

  2. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  3. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  4. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  5. 前端 | 页面触底自动加载 Vue 组件

    不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...

  6. mybatis(三)懒加载

    懒加载的好处: 所谓懒加载(lazy)就是延时加载,延迟加载.什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载.至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为 ...

  7. java基础-jdbc——三种方式加载驱动建立连接

    String url = "jdbc:mysql://localhost:3306/student?Unicode=true&characterEncoding=utf-8" ...

  8. 页面滚动动态加载数据,页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  9. 测试页面,页面里边一次加载50张不同的图片,每张5M以上,查看浏览器的内存使用情况

    测试页面 1.需要你写个测试页面,页面里边一次加载50张不同的图片,每张5M,查看浏览器的内存使用情况 2.可以10张 递增的方式测试 3.图片需要缩放,比如所有图片缩放成600*800的比例 目的 ...

随机推荐

  1. 为什么一段时间后网站后台自动退出 php中session过期时间设置

    修改php配置文件中的session.gc_maxlifetime.如果想了解更多session回收机制,继续阅读.(本文环境php5.2) 概述:每一次php请求,会有1/100的概率(默认值)触发 ...

  2. 调用sqlserver中的存储过程

    1.存储过程名 string strSQL = "usp_GetUnReturnPassports"; 2.创建数据库对象 database Database db = Datab ...

  3. 【linux相识相知】压缩与打包

    我们日常使用window的时候,经常会用到压缩与解压缩,如果要压缩一个文件,右击选择[添加到压缩文件],解压缩则右击选择[解压到当前文件夹],“点点点”就能完成.但是在一个没有装图形化界面的linux ...

  4. 项目视图 Project Browser

    项目视图 在这个视图,你可以访问.管理你当前项目资源. 项目视图左侧面板显示项目的文件夹结构的分层列表,当从列表中单击一个文件夹,其内容会显示在面板的右边.你可以点击小三角展开或折叠文件夹,显示他包含 ...

  5. SpringSecurity 3.2入门(2)环境搭建

    由于目前Spring官方只提供Meven的下载方式,为了能以最快的速度入门使用框架,这里提供百度网盘下载链接. 注:本入门教程默认已经配置成功SpringMVC框架. 1.web.xml配置 < ...

  6. sublime开启vi编辑器功能,与vi常用快捷键

    sublime开启vi编辑器 install package -> vintageES 设置里面 ignored_packages 里面的vintage去掉 VI命令 游标控制 h 游标向左移 ...

  7. JS文本中间显示省略号

    众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display ...

  8. 在asp.net中如何使用Session

    2.那么在asp.net中到底该怎么使用Session呢? Session对象用于存储从一个用户开始访问某个特定的aspx的页面起,到用户离开为止,特定的用户会话所需要的信息.用户在应用程序的页面切换 ...

  9. Spark应用(app jar)发布到Hadoop集群的过程

    记录了Spark,Hadoop集群的开启,关闭,以及Spark应用提交到Hadoop集群的过程,通过web端监控运行状态. 1.绝对路径开启集群 (每次集群重启,默认配置的hadoop集群中tmp文件 ...

  10. Android SDK 目录和作用详解

    1.add-ons这里面保存着附加库,比如GoogleMaps,当然你如果安装了OphoneSDK,这里也会有一些类库在里面.也可以是厂商自己制作的add-ons.开发中该文件是可选的,如果你没有用到 ...