基于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类代码
Jun 27 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
Javascript中With语句用法实例
May 14 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 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
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP文件操作详解
2016/12/30 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python使用django搭建web开发环境
2017/06/09 Python
python之Character string(实例讲解)
2017/09/25 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python 实现绘制整齐的表格
2019/11/18 Python
浅析python中while循环和for循环
2019/11/19 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
学校后勤人员职责
2013/12/27 职场文书
我未来的职业规划范文
2014/01/11 职场文书
学习与创新自我评价
2015/03/09 职场文书
班级管理经验交流材料
2015/11/02 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android