基于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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
vue+canvas实现拼图小游戏
Sep 18 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 XML数据解析代码
2010/05/26 PHP
php 数组元素快速去重
2017/05/05 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
js单例模式的两种方案
2013/10/22 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
Angularjs自定义指令Directive详解
2017/05/27 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
python爬虫增加访问量的方法
2019/08/22 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
房屋公证委托书
2014/04/03 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
党支部三会一课计划
2014/09/24 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
JavaScript文档对象模型DOM
2021/11/20 Javascript