基于jquery实现省市联动特效


Posted in Javascript onDecember 17, 2015

本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下:

运行效果图:

基于jquery实现省市联动特效

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Demo</title>
 <!-- 引入jquery -->
 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>
 <!-- 引入插件 -->
 <script src="jquery.area.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function () {
   $('#area').GangedArea({
    level: 2, // 显示级别, 最大是3, 最小是1
    url: "area.json",// area对应的路径
    provinceValue: "",// 默认指定省份id, 一般编辑的时候使用
    cityValue: "", //指定默认城市id, 一般编辑的时候使用
    districtValue: '', // 默认区id, 一般编辑的时候使用
    className: '', // 附加样式
    provinceName: 'province', // 省份name值
    cityName: 'city',//市name值
    districtName: 'district',// 区name值
    tip: '===请选择==='// 默认提示
   });
  })
 </script>
</head>
<body>
<div id="area"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
js实现网页收藏功能
Dec 17 #Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 #Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 #Javascript
JS数组合并push与concat区别分析
Dec 17 #Javascript
理解Javascript的call、apply
Dec 16 #Javascript
javascript实现网站加入收藏功能
Dec 16 #Javascript
javascript实现无缝上下滚动特效
Dec 16 #Javascript
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JS动画定时器知识总结
2018/03/23 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
便利店的创业计划书
2014/01/15 职场文书
小区门卫管理制度
2014/01/29 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
党员志愿者活动方案
2014/08/28 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
教师调动申请报告
2015/05/18 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js