插件下载地址

http://www.jq22.com/jquery-info8054

效果如下:

使用:

1.引入js

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

<script src="js/distpicker.data.js"></script>

<script src="js/distpicker.js"></script>

<script src="js/main.js"></script>

2.根据demo示例,写div

<div data-toggle="distpicker">

    <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>

3.用户选择值value的获取

<script>
$("#tijiao").click(function(){
var province = $("#eprovinceName").find("option:selected").text();  
var city = $("#ecityName").find("option:selected").text();  
var district = $("#edistrictName").find("option:selected").text();  
console.log(province);
console.log(city);
console.log(district);
});

</script>

完整代码如下:

<!DOCTYPE html>

<html lang="zh">

<body>

<div data-toggle="distpicker">

    <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>

	<input type='button'  value="提交"  id='tijiao'>

</body>	

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

<script src="js/distpicker.data.js"></script>

<script src="js/distpicker.js"></script>

<script src="js/main.js"></script>

<script>

	$("#tijiao").click(function(){

		var province = $("#eprovinceName").find("option:selected").text();

		var city = $("#ecityName").find("option:selected").text();

		var district = $("#edistrictName").find("option:selected").text();

		console.log(province);

		console.log(city);

		console.log(district);

	});

</script>

</html>

特别注意:提交表单是,不需要上面那么麻烦

直接在select上加name属性即可

<select data-province="北京市" class="select" name="province"></select>

<select data-city="北京市市辖区" class="select" name="city"></select>

<select data-district="顺义区" class="select" name="district"></select>

省市区地址三级联动jQuery插件Distpicker使用的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

  3. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  4. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  5. 省市区(县)三级联动代码（js 数据源）

    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

  6. JavaScript实现省市区的三级联动

    JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  7. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  8. vue 引用省市区三级联动（插件）

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  9. jQuery插件 distpicker实现多次赋值

    项目里需要实现省市区联动选择功能,使用了一个jQuery插件dispicker,记录一下使用过程中遇到的问题和解决办法. 需要要实现的功能就两个:打开modal框时设置地址,点击重置按钮时重置地址 原 ...

随机推荐

  1. Elasticsearch6.5.2 X-pack破解及安装教程

    先正常安装 elasticSearch, kibana. 1. 如果是6.5.2版本,可以直接下载jar文件:https://download.csdn.net/download/bigben0123 ...

  2. Tomcat 日志文件分割

    新到公司, 拿到了前辈们留下的 程序 “病历书” , 上面记载了项目上的一些 经常会犯的毛病,  还有相应的解决方法. 其中有的是因为后台 代码逻辑上的一些原因 , N手代码通病了吧 (这个还是以后再 ...

  3. 《数据库MySQL》

    <数据库MySQL> 一.题目要求 下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SECDB,导入 ...

  4. 2017-12-19python全栈9期第四天第二节之列表的增删查改之删除的pop和del和remove和clear

    #!/user/bin/python# -*- coding:utf-8 -*-li = ['zs','ls','ww','zl']# name = li.pop(1) #按索引位置删除有返回值# n ...

  5. 分布式监控系统开发【day37】:填充表配置项目（三）

    一.注册站点初始化数据库 1.目录结构 2.初始化数据库 python3 manage.py makemigrations python3 manage.py migrate #django2.0之前 ...

  6. SpringCloud笔记四：Ribbon

    目录 什么是Ribbon? Ribbon的配置 Maven引入 开启注解 Ribbon负载均衡 新建provider8002和8003 Ribbon核心组件IRule Ribbon自定义 什么是Rib ...

  7. Entity Framework入门教程（4)---EF中的实体关系

    这一节将总结EF是怎么管理实体之间的关系.EF与数据库一样支持三种关系类型:①一对一 ,②一对多,③多对多. 下边是一个SchoolDB数据库的实体数据模型,图中包含所有的实体和各个实体间的关系.通过 ...

  8. https://www.chromestatus.com/features/5093566007214080

    移动端滑动报错:Unable to preventDefault inside passive event listener due to target being treated as passiv ...

  9. 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联等)

    一. 五大构件 引言: Quartz.Net的五大构件 1.  调度器:Scheduler 2.  作业任务:Job 3.  触发器: Trigger 4.  线程池: SimpleThreadPoo ...

  10. cookie小栗子-实现简单的身份验证

    关于Cookie Cookie是一种能够让网站Web服务器把少量数据储存到客户端的硬盘或内存里,或是从客户端的硬盘里读取数据的一种技术. 用来保存客户浏览器请求服务器页面的请求信息,可以在HTTP返回 ...