插件下载地址

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. Input标签使用整理

    0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...

  2. CentOS7使用firewalld防火墙配置端口

    安装启用firewalld防火墙 CentOS7默认的防火墙是firewalld 如果没有firewalld防火墙,可以执行yum install firewalld 命令进行安装 firewalld ...

  3. 时间函数（1）：time，ctime，gmtime，localtime

    asctime(将时间和日期以字符串格式表示) #include<time.h> 定义函数 char * asctime(const struct tm * timeptr); 函数说明 ...

  4. Ajax与JSON共同使用的小实例

    实现的效果: 点击“点击”按钮,可以通过Ajax从服务器调过来相应的文档文件,而不需重新加载页面. 通过json可以将调过来的文档(String)转换为相应的json对象,从而对文档中数据进行操作. ...

  5. Netty序章之BIO NIO AIO演变

    Netty序章之BIO NIO AIO演变 Netty是一个提供异步事件驱动的网络应用框架,用以快速开发高性能.高可靠的网络服务器和客户端程序.Netty简化了网络程序的开发,是很多框架和公司都在使用 ...

  6. 优秀的电商平台Jshop栗子

    摘录自:https://blog.csdn.net/chenjun9205/article/details/52412503 下载源代码 git clone https://git.oschina.n ...

  7. Ubuntu16下Hadoop安装

    1. 安装Ubuntu 2. 新装Ubuntu常用软件安装和系统设置 (1) 安装vim yum install vim (2) 更改hostname为hadoop_master sudo vim / ...

  8. web全栈应用【爬取（scrapy）数据 -> 通过restful接口存入数据库 -> websocket推送展示到前台】

    作为 https://github.com/fanqingsong/web_full_stack_application 子项目的一功能的核心部分,使用scrapy抓取数据,解析完的数据,使用 pyt ...

  9. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  10. TCP-IP详解笔记7

    TCP-IP详解笔记7 TCP: 传输控制协议(初步) 使用差错校正码来纠正通信问题, 自动重复请求(Automatic Repeat Request, ARQ). 分组重新排序, 分组复制, 分组丢 ...