jquery地址选择插件Distpicker_jquery distpicker-程序员宅基地

技术标签: jQuery  地址选择控件  

首先就是引入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
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rainbow8300/article/details/89931840

智能推荐

进程间的几种通信方式_break shmget-程序员宅基地

文章浏览阅读131次。无名管道int pipe(int pipefd[2]);例:#include<sys/types.h>#include<unistd.h>#include<string.h>#include<stdio.h>#include<sys/wait.h>#include<stdlib.h>int main(){ int fd[2]; char buf[128]; pid_t pid; if(pipe(fd) == -_break shmget

gbq6的文件能转换成gbq5_pdf怎么转换成word?这些方法转换效果更佳-程序员宅基地

文章浏览阅读4.4k次。最近,不少朋友们给我留言,问题大概是如下这些:pdf怎么转换成word?如何把PDF文件转换为PPT?如何取出PDF文档中的某几页?如何把几个PDF文档合并成一个?排在首位最多人问的就是PDF转Word文档问题,由于PDF文件自身的一些性质,需要一些特殊的操作才能将其转换成Word格式,但很多普通转换的效果就没有我们想象的那么好了,但我们可以一步步找到最好的转换方法。复制粘贴法有些PDF文件是可以..._gbq6的文件怎么转换成word

Jmeter插件开发实现对mongo数据库的操作_jmeter mongodb返回dbcursor{collection=dbcollection{d-程序员宅基地

文章浏览阅读1.7k次。背景:使用JMeter做接口自动化,用例执行前需要清除一些数据,操作完后校验mongo数据。因为Jmeter3没有对Mongo数据库的支持,所以自己开发java请求实现对mongo的操作。1.eclipse新建java工程,依赖jar包如下2.写一个类实现连接mongo数据库,返回要操作的collection对象public DBCollection ConnectionMongoClient(S..._jmeter mongodb返回dbcursor{collection=dbcollection{database=db{name=''}}}

贪心之最小新整数_请编程完成以下任务: 1.从文件中读取闭区间的个数及它们的描述; 2.找到一个含元素-程序员宅基地

文章浏览阅读187次。贪心水题,每次把山峰删去,如果不存在山峰,则删去最后k个数字#include#includechar s[12];int main(){ int n; scanf("%d",&n); for(int q=0;q

java练习 二、判断语句 if--else语句_输入一个整数,如果此数为0,则输出”石头”,如果此数为1,则输出”剪刀”,如-程序员宅基地

文章浏览阅读2.5k次。1)接java练习 一、HelloWorld,地址:http://blog.csdn.net/u013871927/article/details/700576152)在src文件夹内创建IfPractice.java文件3)打开IfPractice.java,在里面编辑以下代码:public class IfPractice{public String practice(int_输入一个整数,如果此数为0,则输出”石头”,如果此数为1,则输出”剪刀”,如

Unity 中的4X4矩阵_坐标空间变换为什么有4维-程序员宅基地

文章浏览阅读393次。1:为什么模型的变换是4X4而不是3X3的矩阵变换? 我们知道,在空间里的点的坐标是vector3类型的,即是三维的,那为什么要用4维矩阵才能进行旋转平移和缩放呢?要解决这个问题就要从变换的本质来谈起。我们知道,在变换里分为线性变换和非线性变换,比如:我们対模型进行缩放,那么缩放后的点坐标是Pn=aPo (Po是以前的坐标空间,Pn是新的坐标空间,a是缩放比例)好的,现在缩放..._坐标空间变换为什么有4维

随便推点

Mybatis-使用Maven建立Mybatis工程 (IDEA)_使用maven创建一个mybatis-程序员宅基地

文章浏览阅读4k次,点赞3次,收藏8次。使用IDEA创建Mybatis项目Mybatis应用的搭建流程 1. 创建一个maven项目 2. 添加Mybatis,MySQL驱动,junit依赖 3. 构建 4. 在src/main/resources添加一个mybatis-config.xml 5. 编写实体类,放在entity,实体类是跟我们数据库表对应的类 6. 编写映射,mapper包中,定一个m..._使用maven创建一个mybatis

Android毕设项目功能:商城列表与购物车展示(二)_搭构购物车列表条目android-程序员宅基地

文章浏览阅读2.8k次。在上一篇博客中,为大家展示了最终完成效果图,并且分析了界面之间的关系,以及每个界面布局结构中包含的控件信息,对于总体功能数据源进行了封装和介绍。并且重点说明了第一个界面商品分类界面的实现方法。在本篇博客中我们继续操作,完成具体分类的商品信息列表界面的展示。效果图如下:需求分析:此界面的布局结构为上中下结构,可使用线性布局进行排列,上半部分为标题栏,左右两个图标都具备点击功能,左边点击后..._搭构购物车列表条目android

R语言画图表_r语言图表-程序员宅基地

文章浏览阅读3.3k次。R 编程语言中有许多库用来创建图表,主要有6种图表1. 条形图条形图表示矩形条中的数据,其长度与变量的值成比例。R 使用 barplot()函数来创建条形图。R 可以在条形图中绘制垂直和水平条。在条形图中,每个条可以被赋予不同的颜色。语法使用 R 创建条形图的基本语法是barplot(H, xlab, ylab, main, names.arg, col)以下是使用的参数的描述:H..._r语言图表

Netty之线程唤醒wakeup [续]_netty wakeup-程序员宅基地

文章浏览阅读268次。在之前的Netty之线程唤醒wakeup文章中, 介绍了如何唤醒Netty中的监听线程. 接下来我们通过源码的角度,结合一些命令,看一下它的实现.// WakeUp.javaimport java.net.InetSocketAddress;import java.nio.channels.SelectionKey;import java.nio.channels.Selector;import java.nio.channels.ServerSocketChannel;import java._netty wakeup

java encodeuricomponent 编码_encodeURIComponent编码与解码-程序员宅基地

文章浏览阅读1.3w次。问题:JavaScript用encodeURIComponentt编码后无法再后台解码的问题。目前写法:window.self.location="list.jsp?searchtext="+encodeURIComponent(seartext);java处理的代码为:searchtext=java.net.URLDecoder.decode(searchtext,"UTF-8");咋一看觉的没..._java encodeuricomponent

HBase与Zookeeper的关系_hbase和zookeeper的关系-程序员宅基地

文章浏览阅读2.7k次,点赞3次,收藏9次。HBase与Zookeeper的关系一、HBase与Zookeeper的关系ZookeeperClientMasterRegionServer一、HBase与Zookeeper的关系Client客户端、Master、Region都会通过心跳机制(RPC通信)与zookeeper保持联系。当在Hbase中插入或读取数据时流程如下:在Client中写一个Java类运行,客户端只需要连接zoo..._hbase和zookeeper的关系