插件下载地址

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. nginx 返回数据被截断

    nignx 代理 buffer proxy_buffers 16 512k; proxy_buffer_size 512k;   fastcgi buffer fastcgi_buffers 4 64 ...

  2. java.io.FileNotFoundException:my-release-key.keyStore拒绝访问

    安卓生成APK的时候,生成密钥的时候报java.io.FileNotFoundException:my-release-key.keyStore拒绝访问的错误 这是因为权限问题:你的jdk目录在c盘, ...

  3. [APIO2007] 风铃

    题目链接 可能是个树上 DP?指针真好玩 23333. 首先对于所有玩具如果有深度差超过 1 的就是无解(在这里贡献 WA * 3),所以 dfs 一遍记录深度是有必要的…… 然后如果有一个点的两颗子 ...

  4. PowerShell Empire使用笔记

    ##安装过程 git clone https://github.com/EmpireProject/Empire.git cd Empire cd setup sudo ./install.sh ## ...

  5. windows linux 文件编码转换

    查看文件编码在Linux中查看文件编码可以通过以下几种方式:1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vi ...

  6. java matlab 混合编程 Failed to find the required library mclmcrrt9_2.dll on java.library.path.

    问题描述: Exception in thread "main" java.lang.UnsatisfiedLinkError: Failed to find the requir ...

  7. DirectX11--深入理解HLSL常量缓冲区打包规则

    HLSL常量缓冲区打包规则 DirectX11 With Windows SDK完整目录 欢迎加入QQ群: 727623616 可以一起探讨DX11,以及有什么问题也可以在这里汇报. 尽管打包规则并不 ...

  8. JavaScript Date日期对象以及日期格式化方法

    前言 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.util.Date类基础上创建的,为此,Date类型使用自UTC1 ...

  9. 【转载】c++类的实例化与拷贝

    https://www.cnblogs.com/chris-cp/p/3578976.html c++的默认拷贝构造函数,从深度拷贝和浅拷贝说起: https://blog.csdn.net/qq_2 ...

  10. vue 开发微信小程序

    介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实 ...