基于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 相关文章推荐
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript每日必学之封装
Feb 23 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
功能完善的小程序日历组件的实现
Mar 31 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
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
巧用canvas
2017/01/21 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python实现淘宝秒杀脚本
2020/06/23 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
python如何使用腾讯云发送短信
2020/09/17 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
毕业生机械建模求职信
2013/10/14 职场文书
教师业务学习制度
2014/01/25 职场文书
外贸专业求职信
2014/03/09 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
公司规章制度范本
2015/08/03 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android