省市区地址三级联动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框时设置地址,点击重置按钮时重置地址 原 ...
随机推荐
- Ubuntu16.04 安装g++6
https://blog.csdn.net/qq_34877350/article/details/81182022 1.安装gcc-6: sudo apt-get update && ...
- matlab中cumsum函数
matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者help cumsum即可获得该函数的帮助信息. 格式一:B = cumsum(A ...
- 前端面试题整理—JavaScript篇（二）
1.使用js实现一个可持续的动画 2.实现一个可以自由拖动的悬浮框 3.实现一个倒计时效果 4.使用js仿写一个原生下拉列表框 5.创建10个<a>标签,点击的时候弹出对应的序号 6.实现 ...
- [再寄小读者之数学篇](2014-10-18 利用 Lagrange 中值定理求极限)
试求 $$\bex \vlm{n}n^2\sex{x^\frac{1}{n}-x^\frac{1}{n+1}},\quad x>0. \eex$$ 解答: $$\beex \bea \mbox{ ...
- linux 远程 telnet
linux 远程 telnet [ root@test1 ~]# yum install telnet* (安装的三个包 xinetd . telnet-server.telnet) [ roo ...
- 【汇编语言】Doxbox 0.74 修改窗口大小
1.打开Doxbox安装路径,找到DOXBox 0.74-2 Option.bat,双击打开. 2.找到windowresolution和output,将其值修改为下图中的值. 注意:图中,1280x ...
- Jenkins--发送邮件配置
使用Jenkins可以进行构建,并可以发送邮件.今天我们来讲一下邮件的配置. 首先:下载安装插件: 进入[Jenkins-系统管理-插件管理-可选插件],搜索“Email Extension”进行安装 ...
- 编译Android ROM环境搭建
环境搭建 1 安装ubuntu 推荐12.04或13.10 2 安装jdk7和一些所需要的包安装jdk7$ sudo apt-get update$ sudo apt-get install open ...
- 写给自己看的vue
学习过程:自学(个人demo驱动),论坛,qq群多少听到vue,react(很抱歉只弄了hello world demo 虚拟dom 也是概念 到目前也没弄清楚)这类框架(工作经历前后端都折腾,老板指 ...
- 【原创】大叔经验分享（21）yarn中查看每个应用实时占用的内存和cpu资源
在yarn中的application详情页面 http://resourcemanager/cluster/app/$applicationId 或者通过application命令 yarn appl ...