基于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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
jQuery实现增删改查
Dec 22 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
如何删除多级目录
2006/10/09 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js加解密 脚本解密
2008/02/22 Javascript
js常用代码段收集
2011/10/28 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
js登录弹出层特效
2014/03/07 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
详解Vue中添加过渡效果
2017/03/20 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
final, finally, finalize的区别
2012/03/01 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
八年级英语教学反思
2014/01/09 职场文书
学子宴答谢词
2014/01/25 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
教师远程研修感悟
2015/11/18 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
警用民用对讲机找不同
2022/02/18 无线电