• jquery 地址四级联级显示 不默认选择

    代码效果 

    1. <body class="bgca">
    2. 		<img src="./files/joinTooBg.png" style="width: 100%;object-fit: cover;" alt="">
    3.  
    4. 		<!--填写申请资料-->
    5. 		<section>
    6. 			<div class="zi-liao">
    7. 				<h3 class="zong-h3">填写申请资料</h3>
    8. 				<div class="zs-bt"></div>
    9. 				<div class="zi-form">
    10. 					<form action="" method="post" enctype="multipart/form-data" onsubmit="return false;">
    11. 						<div class="zi-bor">
    12. 							<div class="zi-l border-b">
    13. 								<div class="zi-name">姓名：</div>
    14. 								<div class="zi-ingput"><input type="text" name="name" id="name" required=""
    15. 										placeholder="请输入您的姓名"></div>
    16. 							</div>
    17. 							<div class="zi-l border-b">
    18. 								<div class="zi-name">电话：</div>
    19. 								<div class="zi-ingput"><input type="text" name="mobile" id="mobile" required=""
    20. 										placeholder="请输入您的电话"></div>
    21. 							</div>
    22. 							<div class="zi-l border-b" style="display: flex;align-items: center;">
    23. 								<div class="zi-name" style="width: 80px;">代理区域：</div>
    24. 								<div class="join_region">
    25. 									请选择要代理的区域
    26. 									<img class="reight_icon" src="./files/reight_icon.png" alt="">
    27. 								</div>
    28. 							</div>
    29. 						</div>
    30.  
    31. 						<div class="zi-sub">
    32. 							<input type="hidden" name="action" value="city">
    33. 							<input type="submit" id="submit" value="提交">
    34. 						</div>
    35. 					</form>
    36. 				</div>
    37. 			</div>
    38. 		</section>
    39. 		<div class="popup_box_msk"></div>
    40. 		<div class="popup_box">
    41. 			<div class="ads_popup">
    42. 				<div class="ads_name_box">
    43. 					<div class="popupShow_close">
    44. 						<div></div>
    45. 						<!-- <u-icon name="close" size="20" @click="adsObj.popupShow=false"></u-icon> -->
    46. 					</div>
    47. 					<div class="ads_item_name clickProvince">
    48. 						<div class="province_name"></div>
    49. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    50. 					</div>
    51. 					<div class="ads_item_name color_ccc province_name_t" @click="clickReSelect('province')" v-else>
    52. 						请选择省
    53. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    54. 					</div>
    55. 					<div class="ads_item_name clickCity">
    56. 						<div class="city_name"></div>
    57. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    58. 					</div>
    59. 					<div class="ads_item_name color_ccc city_name_t">
    60. 						请选择市
    61. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    62. 					</div>
    63. 					<div class="ads_item_name clickArea">
    64. 						<div class="area_name"></div>
    65. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    66. 					</div>
    67. 					<div class="ads_item_name color_ccc area_name_t">
    68. 						请选择县/区
    69. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    70. 					</div>
    71. 					<div class="ads_item_name clickTown">
    72. 						<div class="town_name"></div>
    73. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    74. 					</div>
    75. 					<div class="ads_item_name color_ccc town_name_t">
    76. 						请选择乡/镇
    77. 						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
    78. 					</div>
    79. 				</div>
    80. 				<div class="ads_item_box">
    81.  
    82. 				</div>
    83. 			</div>
    84. 		</div>
    85.  
    86.  
    87. 		<script type="text/javascript" src="./files/jquery.nicehover.js"></script>
    88. 		<script type="text/javascript" src="./files/distpicker.data.js"></script>
    89. 		<script type="text/javascript" src="./files/distpicker.js"></script>
    90. 		<script src="js/upFrom.js"></script>
    91. 	</body>

    js部分  upFrom.js

    1. const $http = 'https://aaa/';
    2.  
    3. $(function() {
    4. 	$('#submit').on('click', function(event) {
    5. 		let par = {
    6. 			name: "",
    7. 			mobile: "",
    8. 			townAddress: "",
    9. 			townName: "",
    10. 			source: "PC"
    11. 		}
    12. 		par.name = $.trim($('#name').val());
    13. 		par.mobile = $.trim($('#mobile').val());
    14.  
    15. 		for (let k in adsObj) {
    16. 			if (adsObj[k].adsId) {
    17. 				par.townName += adsObj[k].adsId + ','
    18. 			}
    19. 			if (adsObj[k].name) {
    20. 				par.townAddress += adsObj[k].name
    21. 			}
    22. 		}
    23. 		par.townName = par.townName.slice(0, -1)
    24.  
    25. 		if (par.name == '') {
    26. 			var index = alert('请填写您的姓名！', {
    27. 				icon: 2
    28. 			}, function() {
    29. 				$('#name').focus();
    30. 				close(index);
    31. 			});
    32. 			return false;
    33. 		} else if (!/^\d{11}$/.test(par.mobile)) {
    34. 			return alert('请填写正确的的手机号');
    35. 		} else if (par.townAddress == '') {
    36. 			var index = alert('请选择要代理的区域');
    37. 			return
    38. 		}
    39. 		$.ajax({
    40. 				url: $http + 'system/ow-merchants-join/createGW',
    41. 				type: 'POST',
    42. 				contentType: 'application/json',
    43. 				data: JSON.stringify(par),
    44. 			})
    45. 			.done(function(data) {
    46. 				window.console && console.log(data);
    47.  
    48. 				if (data.code == 0) {
    49. 					alert("提交成功")
    50. 					$('form')[0].reset();
    51. 				} else {
    52. 					alert(data.msg)
    53. 					$('form')[0].reset();
    54. 				}
    55. 			})
    56. 			.fail(function() {
    57. 				console.log("error");
    58. 			})
    59. 			.always(function() {
    60. 				console.log("complete");
    61. 			});
    62. 	});
    63. });
    64.  
    65. function parseFormSerializedData(data) {
    66. 	var obj = {};
    67. 	var pairs = data.split('&');
    68. 	for (var i = 0; i < pairs.length; i++) {
    69. 		var pair = pairs[i].split('=');
    70. 		obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    71. 	}
    72. 	return obj;
    73. }
    74.  
    75. const adsObj = {
    76. 	province: {
    77. 		name: "",
    78. 		id: "",
    79. 		adsId: "",
    80. 	},
    81. 	city: {
    82. 		name: "",
    83. 		id: "",
    84. 		adsId: "",
    85. 	},
    86. 	area: {
    87. 		name: "",
    88. 		id: "",
    89. 		adsId: "",
    90. 	},
    91. 	town: {
    92. 		name: "",
    93. 		id: "",
    94. 		adsId: "",
    95. 	},
    96. 	showAddressList: [],
    97. 	provinceType: 0, //如果是直辖市就为1
    98. }
    99.  
    100.  
    101. // 点击选择地址框
    102. $('.join_region').on('click', function() {
    103. 	console.log(111)
    104. 	$('.popup_box').show();
    105. 	$('.popup_box_msk').show();
    106. 	$('.ads_item_name').hide()
    107. 	$('.province_name_t').show()
    108.  
    109. 	getAdsList({}, 'system/city/getProvince')
    110. })
    111.  
    112. $('.popup_box_msk').on('click', function() {
    113. 	let text = ""
    114. 	for (let k in adsObj) {
    115. 		if (adsObj[k].name) {
    116. 			text += adsObj[k].name
    117. 		}
    118. 	}
    119. 	if (text != '') {
    120. 		$('.join_region').text(text)
    121. 	}
    122.  
    123. 	$('.popup_box').hide();
    124. 	$('.popup_box_msk').hide();
    125. })
    126.  
    127. $('.clickProvince').on('click', function() {
    128. 	getAdsList({}, 'system/city/getProvince')
    129. })
    130.  
    131. $('.clickCity').on('click', function() {
    132. 	getAdsList({
    133. 		province: adsObj.province.id
    134. 	}, 'system/city/getCity')
    135. })
    136.  
    137. $('.clickArea').on('click', function() {
    138. 	getAdsList({
    139. 		province: adsObj.province.id,
    140. 		city: adsObj.city.id
    141. 	}, 'system/city/getArea')
    142. })
    143.  
    144. $('.clickTown').on('click', function() {
    145. 	getAdsList({
    146. 		province: adsObj.province.id,
    147. 		city: adsObj.city.id,
    148. 		area: adsObj.area.id
    149. 	}, 'system/city/getTown')
    150. })
    151.  
    152. function each(data) {
    153. 	$.each(data, function(index, item) {
    154. 		// 将每条数据添加到页面中
    155. 		$(".ads_item_box").append(`<div 
    156. 						class='ads_list_item_name'
    157. 						data-id="${item.id}"
    158. 						data-town="${item.town}"
    159. 						data-area="${item.area}"
    160. 						data-city="${item.city}"
    161. 						data-province="${item.province}"
    162. 						data-name="${item.name}"
    163. 						> ${item.name} 
    164. 					</div>`);
    165. 	});
    166. }
    167.  
    168. // 获取省信息
    169. function getAdsList(parameter, url) {
    170. 	$(".ads_item_box").text("")
    171. 	let par = JSON.stringify(parameter)
    172. 	$.ajax({
    173. 			url: $http + url,
    174. 			type: 'POST',
    175. 			contentType: 'application/json',
    176. 			data: par,
    177. 		})
    178. 		.done(function(data) {
    179. 			window.console && console.log(data);
    180. 			// 遍历数据，然后将每个item添加到页面中
    181. 			each(data.data)
    182. 		})
    183. 		.fail(function() {
    184. 			console.log("error");
    185. 		})
    186. 		.always(function() {
    187. 			console.log("complete");
    188. 		});
    189. }
    190. // 获取市信息
    191. function getCity(parameter) {
    192. 	$(".ads_item_box").text("")
    193. 	let par = JSON.stringify(parameter)
    194. 	$.ajax({
    195. 			url: $http + 'system/city/getCity',
    196. 			type: 'POST',
    197. 			contentType: 'application/json',
    198. 			data: par,
    199. 		})
    200. 		.done(function(res) {
    201. 			if (res.data.length < 1) {
    202. 				adsObj.provinceType = 1
    203. 				$('.city_name_t').hide()
    204. 				$('.area_name_t').show()
    205. 				getAdsList({
    206. 					province: parameter.province,
    207. 					city: 1
    208. 				}, 'system/city/getArea')
    209. 				return
    210. 			} else {
    211. 				adsObj.provinceType = 0
    212. 			}
    213. 			// 遍历数据，然后将每个item添加到页面中
    214. 			each(res.data)
    215.  
    216. 		})
    217. 		.fail(function() {
    218. 			console.log("error");
    219. 		})
    220. 		.always(function() {
    221. 			console.log("complete");
    222. 		});
    223. }
    224.  
    225.  
    226. // 点击列表项时获取点击的值
    227. $(".ads_item_box").on("click", "div", function() {
    228. 	var id = $(this).data('id');
    229. 	var province = $(this).data('province');
    230. 	var city = $(this).data('city');
    231. 	var area = $(this).data('area');
    232. 	var town = $(this).data('town');
    233. 	var name = $(this).data('name');
    234. 	if (city == 0) {
    235. 		$('.province_name').text(name)
    236. 		$('.clickProvince').show()
    237. 		$('.province_name_t').hide()
    238. 		$('.city_name_t').show()
    239. 		adsObj.province.name = name
    240. 		adsObj.province.id = province
    241. 		adsObj.province.adsId = id
    242.  
    243. 		adsObj.city.name = ""
    244. 		adsObj.city.id = ""
    245. 		adsObj.city.adsId = ""
    246. 		adsObj.area.name = ""
    247. 		adsObj.area.id = ""
    248. 		adsObj.area.adsId = ""
    249. 		adsObj.town.name = ""
    250. 		adsObj.town.id = ""
    251. 		adsObj.town.adsId = ""
    252. 		getCity({
    253. 			province: province
    254. 		})
    255. 	} else if (area == 0) {
    256. 		$('.city_name').text(name)
    257. 		$('.clickCity').show()
    258. 		$('.city_name_t').hide()
    259. 		$('.area_name_t').show()
    260.  
    261. 		adsObj.city.name = name
    262. 		adsObj.city.id = city
    263. 		adsObj.city.adsId = id
    264.  
    265. 		adsObj.area.name = ""
    266. 		adsObj.area.id = ""
    267. 		adsObj.area.adsId = ""
    268. 		adsObj.town.name = ""
    269. 		adsObj.town.id = ""
    270. 		adsObj.town.adsId = ""
    271.  
    272. 		getAdsList({
    273. 			province: province,
    274. 			city: city
    275. 		}, 'system/city/getArea')
    276. 	} else if (town == 0) {
    277. 		$('.area_name').text(name)
    278. 		$('.clickArea').show()
    279. 		$('.area_name_t').hide()
    280. 		$('.town_name_t').show()
    281.  
    282. 		adsObj.area.name = name
    283. 		adsObj.area.id = area
    284. 		adsObj.area.adsId = id
    285. 		adsObj.town.name = ""
    286. 		adsObj.town.id = ""
    287. 		adsObj.town.adsId = ""
    288. 		getAdsList({
    289. 			province: province,
    290. 			city: city,
    291. 			area: area
    292. 		}, 'system/city/getTown')
    293. 	} else if (town) {
    294. 		$('.town_name').text(name)
    295. 		$('.clickTown').show()
    296. 		$('.town_name_t').hide()
    297.  
    298. 		adsObj.town.name = name
    299. 		adsObj.town.id = town
    300. 		adsObj.town.adsId = id
    301.  
    302. 		let text = ""
    303. 		for (let k in adsObj) {
    304. 			if (adsObj[k].name) {
    305. 				text += adsObj[k].name
    306. 			}
    307. 		}
    308. 		$('.join_region').text(text)
    309.  
    310. 		$('.popup_box').hide();
    311. 		$('.popup_box_msk').hide();
    312. 	}
    313. });

    弹出层css部分

    1. .join_region{
    2. 	flex: 1;
    3. 	color: #717171;
    4. 	font-size: 15px;
    5. 	display: flex;
    6. 	align-items: center;
    7. 	justify-content: space-between;
    8. 	box-sizing: border-box;
    9. 	padding-right: 10px;
    10. 	cursor:pointer;
    11. }
    12.  
    13. .popup_box{
    14. 	position: fixed;
    15. 	bottom: 0;
    16. 	left: 0;
    17. 	height: 60vh;
    18. 	width: 100%;
    19. 	background-color: aquamarine;
    20. 	display: none;
    21. 	cursor:pointer;
    22. }
    23.  
    24. .popup_box_msk{
    25. 	position: fixed;
    26. 	width: 100%;
    27. 	height: 100%;
    28. 	background-color: rgba(0,0,0,0.6);
    29. 	top: 0;
    30. 	display: none;
    31. }
    32.  
    33.  
    34. .ads_popup{
    35. 	height: 100%;
    36. 	background-color: #fff;
    37. 	display: flex;
    38. 	flex-direction:column;
    39. 	box-shadow: 10px 10px 10px 10px #ccc;
    40. }
    41.  
    42. .ads_name_box{
    43. 	padding:10px;
    44. 	border-bottom: 1px solid #ccc;
    45. 	font-size: 16px;
    46. }
    47.  
    48. .ads_item_name{
    49. 	display: flex;
    50. 	justify-content: space-between;
    51. 	align-items: center;
    52. 	padding: 5px 0;
    53. }
    54.  
    55. .ads_item_right_icon{
    56. 	width: 10px;
    57. 	height: 16px;
    58. }
    59.  
    60. .popupShow_close{
    61. 	padding-bottom: 5px;
    62. 	display: flex;
    63. 	align-items: center;
    64. 	justify-content: space-between;
    65. }
    66.  
    67. .ads_item_box{
    68. 	flex: 1;
    69. 	overflow-x: hidden;
    70. 	overflow: auto;
    71. 	font-size: 14px;
    72. 	box-sizing: border-box;
    73. 	padding: 0 10px;
    74. }
    75.  
    76. .ads_list_item_name{
    77. 	padding: 8px 0;
    78. }
    79.  
    80. .color_ccc{
    81. 	color: #7a7a7a;
    82. }
    83.  
    84. .reight_icon{
    85. 	height: 13px;
    86. 	width: 8px;
    87. }

     地址数据请求后端接口 查询

    后端返回数据格式

    全国省市县镇 数据链接: https://pan.baidu.com/s/195H8n-rhEzLCPw0ssltcsQ

    提取码: hujx

    原码链接 链接: https://pan.baidu.com/s/1y_UeP1MUuDLU5hvCX6QFjQ

    提取码: ec5j

  • 相关阅读:
    【计算机网络】第三章·数据链路层 超硬核复习好物，考前必看！！！
    GBase 8c产品简介
    decompose transformation matrix
    发布系统的核心架构和功能设计
    【Elsevier出版社】网络通信类SCI，仅2-3个月左右录用
    Centos8安装部署JumpServer堡垒机
    【RP-RV1126】烧录固件使用记录
    3.容器的学习(2/2)
    ansible常用运维命令-基于centos8_ansible2.12.7_秘钥方式连接
    爬虫——爬虫初识、requests模块
  • 原文地址：https://blog.csdn.net/sdgjah2/article/details/134661952