基于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的几种方法
Oct 23 Javascript
用javascript实现给图片加链接
Aug 15 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
Element Input组件分析小结
Oct 11 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
详细分析React 表单与事件
Jul 08 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python机器学习之神经网络(二)
2017/12/20 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python斐波那契数列的计算方法
2018/09/27 Python
python爬取指定微信公众号文章
2018/12/20 Python
关于python字符串方法分类详解
2019/08/20 Python
Python ORM编程基础示例
2020/02/02 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
python中Mako库实例用法
2020/12/31 Python
python中altair可视化库实例用法
2021/01/26 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
《梅兰芳学艺》教学反思
2014/02/24 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
在 Python 中利用 Pool 进行多线程
2022/04/24 Python