基于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程序设计有所帮助。
相关推荐
-
基于jquery实现省市联动效果
由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo
-
DIV+CSS+jQ实现省市联动可扩展
公司的省市县数据比较坑爹,是通过ehr系统那边生成ID来匹配,比如福建省 对应ID 01211014AOP145,城市也对应一个ID,然后区县就不管了.然后我就网上找了一堆资源 插件什么的感觉都不适用就决定自己写一个.因为自己也是半桶水的那种界面都不知道怎么弄,弄哪种格式,什么风格,配色啊.就默默的找了京东.亚马逊.淘宝.当当等他们关于省市区是怎么做的.图如下: 最后我结合一下做了如下图: 废话不多说上源码: <style type="text/css"> #divProC
-
Jquery实现仿京东商城省市联动菜单
本文实例讲述了Jquery实现仿京东商城省市联动菜单的简单实例代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=&q
-
基于jquery实现省市联动特效
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <!-- 引入jquery --> <script src="http://lib.si
-
基于Jquery实现万圣节快乐特效
效果展示图如下所示: 点击此处查看效果图: http://keleyi.com/keleyi/phtml/jqtexiao/6.htm 以下为HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://
-
基于JS实现省市联动效果代码分享
在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区.品种等有多级选项时.比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"
-
基于jquery实现二级联动效果
本文实例为大家分享了jquery实现二级联动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级联动</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js&
-
基于JavaScript实现省市联动效果
本文实例为大家分享了JavaScript实现省市联动效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省市级联动效果</title> </head> <body onload="initProvince()"> 省
-
基于jquery的二级联动菜单实现代码
jQuery 1.3.2 简单实现select二级联动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
基于JQuery的日期联动实现代码
实现目标: 两个日期,有下拉框: 复制代码 代码如下: <head> //导入jquery地址 <script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script> <script type="text/javascript"> //startYear发生变化 function change
-
基于jquery实现轮播特效
轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个.在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘.今天,也不敢果敢的说,可以马上写好一个轮播. 希望是通过随笔的方式,记录下一些思维过程. 首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片. 其次,css样式:div固定住宽高,overflow:hidden:ul的宽度建议是动态获取(下一步会讲是怎么获取):关于li我习惯使用浮动,让他们依
-
基于JQUERY的多级联动代码
jquery.select.more.js 复制代码 代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu
随机推荐
- jQuery实现带有动画效果的回到顶部和底部代码
- 临时记录:一个正则
- 华众HZHOST虚拟主机管理系统服务器IP更换详细步骤说明
- Nginx服务器高性能优化的配置方法小结
- Java中数组的创建与传参方法(学习小结)
- javascript jq 弹出层实例
- javascript 身份证号码验证函数(可辨真伪,支持15或18位身份证号)测试误差为0
- Android自定义商品购买数量加减控件
- source.php查看源文件
- 通过C#实现发送自定义的html格式邮件
- Android实现标题显示隐藏功能
- ajax读取properties资源文件数据的方法
- VBS破坏性应用代码
- 如何得到数据库中所有表名 表字段及字段中文描述
- jquery实现input框获取焦点的方法
- Windows Server 2003 系统安全配置方法
- 使用PHP模拟HTTP认证
- Chart.js 轻量级HTML5图表绘制工具库(知识整理)
- 利用SSL配置Nginx反向代理的简单步骤
- Flask框架学习笔记之使用Flask实现表单开发详解