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

还没秃头的初级前端程序员2023-12-03 23:38

代码效果

复制代码 
<body class="bgca">
		<img src="./files/joinTooBg.png" style="width: 100%;object-fit: cover;" alt="">

		<!--填写申请资料-->
		<section>
			<div class="zi-liao">
				<h3 class="zong-h3">填写申请资料</h3>
				<div class="zs-bt"></div>
				<div class="zi-form">
					<form action="" method="post" enctype="multipart/form-data" onsubmit="return false;">
						<div class="zi-bor">
							<div class="zi-l border-b">
								<div class="zi-name">姓名：</div>
								<div class="zi-ingput"><input type="text" name="name" id="name" required=""
										placeholder="请输入您的姓名"></div>
							</div>
							<div class="zi-l border-b">
								<div class="zi-name">电话：</div>
								<div class="zi-ingput"><input type="text" name="mobile" id="mobile" required=""
										placeholder="请输入您的电话"></div>
							</div>
							<div class="zi-l border-b" style="display: flex;align-items: center;">
								<div class="zi-name" style="width: 80px;">代理区域：</div>
								<div class="join_region">
									请选择要代理的区域
									<img class="reight_icon" src="./files/reight_icon.png" alt="">
								</div>
							</div>
						</div>

						<div class="zi-sub">
							<input type="hidden" name="action" value="city">
							<input type="submit" id="submit" value="提交">
						</div>
					</form>
				</div>
			</div>
		</section>
		<div class="popup_box_msk"></div>
		<div class="popup_box">
			<div class="ads_popup">
				<div class="ads_name_box">
					<div class="popupShow_close">
						<div></div>
						<!-- <u-icon name="close" size="20" @click="adsObj.popupShow=false"></u-icon> -->
					</div>
					<div class="ads_item_name clickProvince">
						<div class="province_name"></div>
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name color_ccc province_name_t" @click="clickReSelect('province')" v-else>
						请选择省
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name clickCity">
						<div class="city_name"></div>
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name color_ccc city_name_t">
						请选择市
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name clickArea">
						<div class="area_name"></div>
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name color_ccc area_name_t">
						请选择县/区
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name clickTown">
						<div class="town_name"></div>
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
					<div class="ads_item_name color_ccc town_name_t">
						请选择乡/镇
						<img class="ads_item_right_icon" src="./files/reight_icon.png" />
					</div>
				</div>
				<div class="ads_item_box">

				</div>
			</div>
		</div>


		<script type="text/javascript" src="./files/jquery.nicehover.js"></script>
		<script type="text/javascript" src="./files/distpicker.data.js"></script>
		<script type="text/javascript" src="./files/distpicker.js"></script>
		<script src="js/upFrom.js"></script>
	</body>

js部分 upFrom.js

复制代码 
const $http = 'https://aaa/';

$(function() {
	$('#submit').on('click', function(event) {
		let par = {
			name: "",
			mobile: "",
			townAddress: "",
			townName: "",
			source: "PC"
		}
		par.name = $.trim($('#name').val());
		par.mobile = $.trim($('#mobile').val());

		for (let k in adsObj) {
			if (adsObj[k].adsId) {
				par.townName += adsObj[k].adsId + ','
			}
			if (adsObj[k].name) {
				par.townAddress += adsObj[k].name
			}
		}
		par.townName = par.townName.slice(0, -1)

		if (par.name == '') {
			var index = alert('请填写您的姓名！', {
				icon: 2
			}, function() {
				$('#name').focus();
				close(index);
			});
			return false;
		} else if (!/^\d{11}$/.test(par.mobile)) {
			return alert('请填写正确的的手机号');
		} else if (par.townAddress == '') {
			var index = alert('请选择要代理的区域');
			return
		}
		$.ajax({
				url: $http + 'system/ow-merchants-join/createGW',
				type: 'POST',
				contentType: 'application/json',
				data: JSON.stringify(par),
			})
			.done(function(data) {
				window.console && console.log(data);

				if (data.code == 0) {
					alert("提交成功")
					$('form')[0].reset();
				} else {
					alert(data.msg)
					$('form')[0].reset();
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
	});
});

function parseFormSerializedData(data) {
	var obj = {};
	var pairs = data.split('&');
	for (var i = 0; i < pairs.length; i++) {
		var pair = pairs[i].split('=');
		obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
	}
	return obj;
}

const adsObj = {
	province: {
		name: "",
		id: "",
		adsId: "",
	},
	city: {
		name: "",
		id: "",
		adsId: "",
	},
	area: {
		name: "",
		id: "",
		adsId: "",
	},
	town: {
		name: "",
		id: "",
		adsId: "",
	},
	showAddressList: [],
	provinceType: 0, //如果是直辖市就为1
}


// 点击选择地址框
$('.join_region').on('click', function() {
	console.log(111)
	$('.popup_box').show();
	$('.popup_box_msk').show();
	$('.ads_item_name').hide()
	$('.province_name_t').show()

	getAdsList({}, 'system/city/getProvince')
})

$('.popup_box_msk').on('click', function() {
	let text = ""
	for (let k in adsObj) {
		if (adsObj[k].name) {
			text += adsObj[k].name
		}
	}
	if (text != '') {
		$('.join_region').text(text)
	}

	$('.popup_box').hide();
	$('.popup_box_msk').hide();
})

$('.clickProvince').on('click', function() {
	getAdsList({}, 'system/city/getProvince')
})

$('.clickCity').on('click', function() {
	getAdsList({
		province: adsObj.province.id
	}, 'system/city/getCity')
})

$('.clickArea').on('click', function() {
	getAdsList({
		province: adsObj.province.id,
		city: adsObj.city.id
	}, 'system/city/getArea')
})

$('.clickTown').on('click', function() {
	getAdsList({
		province: adsObj.province.id,
		city: adsObj.city.id,
		area: adsObj.area.id
	}, 'system/city/getTown')
})

function each(data) {
	$.each(data, function(index, item) {
		// 将每条数据添加到页面中
		$(".ads_item_box").append(`<div 
						class='ads_list_item_name'
						data-id="${item.id}"
						data-town="${item.town}"
						data-area="${item.area}"
						data-city="${item.city}"
						data-province="${item.province}"
						data-name="${item.name}"
						> ${item.name} 
					</div>`);
	});
}

// 获取省信息
function getAdsList(parameter, url) {
	$(".ads_item_box").text("")
	let par = JSON.stringify(parameter)
	$.ajax({
			url: $http + url,
			type: 'POST',
			contentType: 'application/json',
			data: par,
		})
		.done(function(data) {
			window.console && console.log(data);
			// 遍历数据，然后将每个item添加到页面中
			each(data.data)
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
}
// 获取市信息
function getCity(parameter) {
	$(".ads_item_box").text("")
	let par = JSON.stringify(parameter)
	$.ajax({
			url: $http + 'system/city/getCity',
			type: 'POST',
			contentType: 'application/json',
			data: par,
		})
		.done(function(res) {
			if (res.data.length < 1) {
				adsObj.provinceType = 1
				$('.city_name_t').hide()
				$('.area_name_t').show()
				getAdsList({
					province: parameter.province,
					city: 1
				}, 'system/city/getArea')
				return
			} else {
				adsObj.provinceType = 0
			}
			// 遍历数据，然后将每个item添加到页面中
			each(res.data)

		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
}


// 点击列表项时获取点击的值
$(".ads_item_box").on("click", "div", function() {
	var id = $(this).data('id');
	var province = $(this).data('province');
	var city = $(this).data('city');
	var area = $(this).data('area');
	var town = $(this).data('town');
	var name = $(this).data('name');
	if (city == 0) {
		$('.province_name').text(name)
		$('.clickProvince').show()
		$('.province_name_t').hide()
		$('.city_name_t').show()
		adsObj.province.name = name
		adsObj.province.id = province
		adsObj.province.adsId = id

		adsObj.city.name = ""
		adsObj.city.id = ""
		adsObj.city.adsId = ""
		adsObj.area.name = ""
		adsObj.area.id = ""
		adsObj.area.adsId = ""
		adsObj.town.name = ""
		adsObj.town.id = ""
		adsObj.town.adsId = ""
		getCity({
			province: province
		})
	} else if (area == 0) {
		$('.city_name').text(name)
		$('.clickCity').show()
		$('.city_name_t').hide()
		$('.area_name_t').show()

		adsObj.city.name = name
		adsObj.city.id = city
		adsObj.city.adsId = id

		adsObj.area.name = ""
		adsObj.area.id = ""
		adsObj.area.adsId = ""
		adsObj.town.name = ""
		adsObj.town.id = ""
		adsObj.town.adsId = ""

		getAdsList({
			province: province,
			city: city
		}, 'system/city/getArea')
	} else if (town == 0) {
		$('.area_name').text(name)
		$('.clickArea').show()
		$('.area_name_t').hide()
		$('.town_name_t').show()

		adsObj.area.name = name
		adsObj.area.id = area
		adsObj.area.adsId = id
		adsObj.town.name = ""
		adsObj.town.id = ""
		adsObj.town.adsId = ""
		getAdsList({
			province: province,
			city: city,
			area: area
		}, 'system/city/getTown')
	} else if (town) {
		$('.town_name').text(name)
		$('.clickTown').show()
		$('.town_name_t').hide()

		adsObj.town.name = name
		adsObj.town.id = town
		adsObj.town.adsId = id

		let text = ""
		for (let k in adsObj) {
			if (adsObj[k].name) {
				text += adsObj[k].name
			}
		}
		$('.join_region').text(text)

		$('.popup_box').hide();
		$('.popup_box_msk').hide();
	}
});

弹出层css部分

复制代码 
.join_region{
	flex: 1;
	color: #717171;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding-right: 10px;
	cursor:pointer;
}

.popup_box{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 60vh;
	width: 100%;
	background-color: aquamarine;
	display: none;
	cursor:pointer;
}

.popup_box_msk{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	top: 0;
	display: none;
}


.ads_popup{
	height: 100%;
	background-color: #fff;
	display: flex;
	flex-direction:column;
	box-shadow: 10px 10px 10px 10px #ccc;
}

.ads_name_box{
	padding:10px;
	border-bottom: 1px solid #ccc;
	font-size: 16px;
}

.ads_item_name{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
}

.ads_item_right_icon{
	width: 10px;
	height: 16px;
}

.popupShow_close{
	padding-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ads_item_box{
	flex: 1;
	overflow-x: hidden;
	overflow: auto;
	font-size: 14px;
	box-sizing: border-box;
	padding: 0 10px;
}

.ads_list_item_name{
	padding: 8px 0;
}

.color_ccc{
	color: #7a7a7a;
}

.reight_icon{
	height: 13px;
	width: 8px;
}

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

后端返回数据格式

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

提取码: hujx

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

提取码: ec5j

相关推荐
weixin_382395234 小时前
为小工厂量身打造：本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__4 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.5 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~6 小时前
CSS元素显示模式（display）
前端·css
AI大模型-小华7 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子9 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅9 小时前
架构没变、规模没变，DeepSeek V4 Flash 正式版凭什么暴涨 47 分？
前端·aigc·deepseek
jarvisuni9 小时前
DeepSeekFlash前端依旧拉垮，而且变慢了很多！
前端·javascript·算法
卷福同学11 小时前
AI编程出海第二步：验证关键词能否做站
前端·人工智能·后端
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09历年考研数学一、数学二、数学三真题试卷及答案PDF102026 年 AI 大模型 & AI 编程工具实战全总结