jquery地址选择插件Distpicker

最新推荐文章于 2025-06-07 13:33:57 发布

rainbow8300

最新推荐文章于 2025-06-07 13:33:57 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签：地址选择控件

本文链接：https://blog.youkuaiyun.com/rainbow8300/article/details/89931840

jQuery 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了使用distpicker实现省市区地址选择功能。需引入相关js，可自定义样式。主要功能是选择省市区，获取对应code和name并展示到dom元素中，还给出了文件链接和提取码，同时提出使用中报错的问题寻求解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先就是引入distpicker的相关js，具体样式的话可以根据自己想要的去调。

主要实现的功能是：选择省市区，获取到对应的省市区code和name，并展示到对应的dom元素中

在这里插入图片描述
文件链接：https://pan.baidu.com/s/1Me_Y7eBmCLxLgicoIbcPWw
提取码：magv

1、页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>地址填写页面</title>
	<link rel="stylesheet" href="css/pub.css">
	<style>
		.address_container{width: 100%;height: 100%;background: #fff;padding-top: 12.14vh;-webkit-box-sizing: border-box;box-sizing: border-box;}
		.address_form{width: 78.93vw;margin: 0 auto;}
		.address_form .cell{height: 6.9vh;width: 100%;border-bottom: 1px solid #666666;padding-top: 1.18vh;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-flex;isplay: flex;position: relative;align-items: center;}
		.address_form .cell .title{font-size: 0;width: 7.73vw;height: 100%;position: relative;}
		.address_form .cell .title i{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
		.address_form .cell input{padding-left: 1.33vw;font-size: 3.73vw;-webkit-box-sizing: border-box;box-sizing: border-box;}
		.address_form .cell #address{width: 100%;}
		.address_form form{padding-bottom: 4.65vh;}
		.address_form .submit{width: 70.8vw;height: 10.8vw;background: #178631;text-align: center;line-height: 10.8vw;border-radius: 5.4vw;color: #fff;letter-spacing: 8px;font-family: "思源黑体 CN";margin: 0 auto;}
		.picker_box{width: 32.33vw;position: absolute;right: 0;}
		.picker_box>div{display: -webkit-flex;display: flex;font-size: 0;padding-left: 8px;-webkit-box-sizing: border-box;box-sizing: border-box;}
		.picker_box select{width: 33.33%;margin: 0;padding: 0;border: none;-webkit-appearance: none;appearance:none; align-items: center;white-space: nowrap;outline: none;-webkit-rtl-ordering: visual;background: #fff;border: none;}
		.picker_box select option{padding-left: 3px;border: none;}
	</style>
</head>
<body>
	<div class="address_container">
		<div class="address_pic">
			<img src="images/address_title.png" alt="">
		</div>
		<div class="address_form">
			<form action="" id="form">
				<div class="cell">
					<div class="title">
						<i><img src="images/address_address.png" alt=""></i>
						<label for="checkAdress">选择地址</label>
					</div>
					<input type="text" id="checkAdress" name="checkAdress" placeholder="请选择市/区/县" readonly="">
					<div class="picker_box">
						<div data-toggle="distpicker" id="distpicker">
							<div class="distpicker_cover">
								<span>省</span>
								<span>市</span>
								<span>区</span>
							</div>
						    <select id="eprovinceName" data-province="省" name="provinceName"></select>
						    <select id="ecityName" data-city="市" name="cityName"></select>
						    <select id="edistrictName" data-district="区" name="districtName"></select>
						</div>
					</div>
				</div>
				<div class="cell">
					<div class="title">
						<label for="address">详细地址</label>
					</div>
					<input type="text" id="address" name="address"  placeholder="请输入具体地址,例如:街道/小区/门牌">
				</div>
			</form>
			<div class="submit">提交</div>
		</div>
	</div>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/distpicker.data.js"></script>
	<script src="js/distpicker.min.js"></script>
	<script>
		$(document).ready(function(){
			// 省市区code和name
			var province = '';
			var city = '';
			var district = '';
			var provinceId = '';
			var cityId = '';
			var districtId = '';
			// 空白的表单对象
			var formData = {};
			//地址选择事件
			dispicker()
			function dispicker() {
				$('#eprovinceName').click(function(){
					province = $('#eprovinceName').find("option:selected").text();
					if (province != "省" ) {
						$('#checkAdress').val(province);
						provinceId=$('#eprovinceName').find('option:selected').attr('data-code');
						console.log(provinceId + ' :' +province)
					}
				})
				$('#ecityName').click(function(){
					city = $('#ecityName').find("option:selected").text();
					if (city != '市') {
						cityId=$('#ecityName').find('option:selected').attr('data-code');
						$('#checkAdress').val(province+city);					
						console.log(cityId + ' :' +city)
					}
				})
				$('#edistrictName').click(function(){
					district = $('#edistrictName').find("option:selected").text();
					if (district != '区') {
						$('#checkAdress').val(province+city+district)
						districtId=$('#edistrictName').find('option:selected').attr('data-code');
						console.log(districtId + ' :' +district)
					}

				})
			}
			// 提交表单
			submit()
			function submit() {
				$('.submit').click(function(){
					var arr = $("#form").serializeArray();
					console.log(arr);
					$.each(arr, function(){
						if (this.name != 'checkAdress') {
							formData[this.name] = this.value;
						}
					})
					formData.provinceId = provinceId
					formData.cityId = cityId
					formData.districtId = districtId
					console.log(formData)
				})
			}
		})
	</script>
</body>
</html>