jquery地址选择插件Distpicker

最新推荐文章于 2024-08-08 07:46:15 发布

rainbow8300

最新推荐文章于 2024-08-08 07:46:15 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/rainbow8300/article/details/89931840

版权

首先就是引入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