省市区地址三级联动jQuery插件Distpicker使用
插件下载地址
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使用的更多相关文章
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 中国省市区地址三级联动插件---jQuery Distpicker
插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...
- JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- 省市区(县)三级联动代码(js 数据源)
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
- JavaScript实现省市区的三级联动
JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- jQuery插件 distpicker实现多次赋值
项目里需要实现省市区联动选择功能,使用了一个jQuery插件dispicker,记录一下使用过程中遇到的问题和解决办法. 需要要实现的功能就两个:打开modal框时设置地址,点击重置按钮时重置地址 原 ...
随机推荐
- JS兼容问题
//1.滚动条到顶端的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //2.滚动条 ...
- SEO总结
学习了这么久了seo,对学过的知识进行一下总结. 服务器和域名 首先的一个就是对服务器和域名的选择,服务器最好能是独立的,因为如果不是独立服务器很容易被别人放在服务器上的网站所影响,然后就是域名,需要 ...
- 利用git提交代码
一.首先需要下载git 查看电脑是否安装git,打开终端,输入git,回车如果输出如下,则代表已安装了git 如果未安装,则会输出: 按照提示输入:sudo apt-get install git即可 ...
- [物理学与PDEs]第5章第3节 守恒定律, 应力张量
5. 3 守恒定律, 应力张量 5. 3. 1 质量守恒定律 $$\bex \cfrac{\p \rho}{\p t}+\Div_y(\rho{\bf v})=0. \eex$$ 5. 3. 2 应 ...
- Java部分概念理解
第1部分 方法 1.1 方法基本概念 1) 方法:用于封装一段特定功能代码,尽可能一个方法至只实现一个基本功能,相当于C语言中的函数: 2) 方法可以多次调用: 3) 避免代码冗余,便于维护,便于团队 ...
- Java CAS 比较并且更换值
原文:Java中CAS详解 作者:jayxu无捷之径 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会 ...
- 使用OpenPop.dll开发读取POP3邮件程序
1.设置邮件的pop3 以163网易邮箱为例: https://jingyan.baidu.com/article/adc81513804be9f722bf7350.html 2.下载OpenPop. ...
- 2.6 if嵌套
if嵌套 通过学习if的基本用法,已经知道了 当需要满足条件去做事情的这种情况需要使用if 当满足条件时做事情A,不满足条件做事情B的这种情况使用if-else 想一想: 坐火车或者地铁的实际情况是: ...
- Notepad++ --v7.5.8 (64bit) 安装目录显示插件(Explorer)
https://blog.csdn.net/qq_24153697/article/details/83036761 最近想自己做一个小项目,用Notepad做IDE,但是发现已安装的Notepad没 ...
- JQuery Advanced
1.Jquery Utility <1> Type & Function & setTimeOut <!DOCTYPE html> <html lang= ...