基于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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
javascript中数组方法汇总
Jul 07 Javascript
ztree实现权限横向显示功能
May 20 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
js简单时间比较的方法
2016/08/02 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
使用python实现knn算法
2017/12/20 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python tkinter基本属性详解
2019/09/16 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
毕业生个人求职信范文分享
2014/01/05 职场文书
水果超市创业计划书
2014/01/27 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
应届生找工作求职信
2014/06/24 职场文书
政风行风评议整改方案
2014/09/15 职场文书
2014年法院工作总结
2014/11/24 职场文书
三峡人家导游词
2015/01/31 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
办公室规章制度范本
2015/08/04 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL