实例介绍
【实例简介】jQuery四级联动下拉菜单代码
【实例截图】
【核心代码】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery四级联动下拉菜单代码</title> <link rel="stylesheet" type="text/css" href="style/cssreset-min.css"> <link rel="stylesheet" type="text/css" href="style/common.css"> <style type="text/css"> .citys{ margin-bottom: 10px; } .citys p{ line-height: 28px; } .warning{ color: #c00; } .main a{ margin-right: 8px; color: #369; } </style> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript" src="script/jquery.citys.js"></script> </head> <body><script src="/demos/googlegg.js"></script> <div class="main"> <div id="demo" class="citys"> <p> <select name="province"></select> <select name="city"></select> <select name="area"></select> </p> </div> <div class="code"> <p>通过地区编码初始化设置</p> <p>$('#demo').citys({code:350206});</p> </div> <script type="text/javascript"> $('#demo').citys({code:350206}); </script> <div id="demo1" class="citys"> <p> <select name="province"></select> <select name="city"></select> <select name="area"></select> </p> </div> <div class="code"> <p>通过地区名称初始化设置,并且下拉框值为地区名称</p> <p>$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});</p> </div> <script type="text/javascript"> $('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'}); </script> <div id="demo2" class="citys"> <p> <select name="province"></select> <select name="city"></select> <select name="area"></select> </p> <p id="place">请选择地区</p> </div> <div class="code"> <p>事件处理</p> <pre> $('#demo2').citys({ required:false, nodata:'disabled', onChange:function(data){ var text = data['direct']?'(直辖市)':''; $('#place').text('当前选中地区:' data['province'] text ' ' data['city'] ' ' data['area']); } }); </pre> </div> <script type="text/javascript"> $('#demo2').citys({ required:false, nodata:'disabled', onChange:function(data){ var text = data['direct']?'(直辖市)':''; $('#place').text('当前选中地区:' data['province'] text ' ' data['city'] ' ' data['area']); } }); </script> <div id="demo3" class="citys"> <p> <select name="province"></select> <select name="city"></select> <select name="area"></select> <select name="town"></select> </p> </div> <div class="code"> <p>扩展显示行政区划第四级(街道)信息:</p> <pre> var $town = $('#demo3 select[name="town"]'); var townFormat = function(info){ $town.hide().empty(); if(info['code']%1e4&&info['code']<7e6){ //是否为“区”且不是港澳台地区 $.ajax({ url:'http://passer-by.com/data_location/town/' info['code'] '.json', dataType:'json', success:function(town){ $town.show(); for(i in town){ $town.append('<option value="' i '">' town[i] '</option>'); } } }); } }; $('#demo3').citys({ province:'福建', city:'厦门', area:'思明', onChange:function(info){ townFormat(info); } },function(api){ var info = api.getInfo(); townFormat(info); }); </pre> </div> <script type="text/javascript"> var $town = $('#demo3 select[name="town"]'); var townFormat = function(info){ $town.hide().empty(); if(info['code']%1e4&&info['code']<7e5){ //是否为“区”且不是港澳台地区 $.ajax({ url:'http://passer-by.com/data_location/town/' info['code'] '.json', dataType:'json', success:function(town){ $town.show(); for(i in town){ $town.append('<option value="' i '">' town[i] '</option>'); } } }); } }; $('#demo3').citys({ province:'福建', city:'厦门', area:'思明', onChange:function(info){ townFormat(info); } },function(api){ var info = api.getInfo(); townFormat(info); }); </script> <div class="example"> <div class="call"> <h1>调用方法:</h1> <p>$(selector).citys(options,callback);</p> </div> <h2> options参数</h2> <table> <thead> <tr> <th width="150">参数</th> <th width="120">默认值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>dataUrl</td> <td>[数据库地址]</td> <td> <p>最新数据库(<script src="http://passer-by.com/data_location/version.js"></script>):<a href="http://passer-by.com/data_location/list.json" target="_blank">JSON格式</a><a href="http://passer-by.com/data_location/list.jsonp" target="_blank">JSONP格式</a></p> <p>数据库项目:<a href="https://github.com/mumuy/data_location" target="_blank">中国行政区划(省、市、区、街道)</a></p> </td> </tr> <tr> <td>dataType</td> <td>'json'</td> <td> <p>数据库类型:'json'或'jsonp'</p> <p class="warning">IE9-由于默认安全设置,需开启“通过域访问数据源”才能跨域访问json,此类情况建议使用jsonp格式</p> </td> </tr> <tr> <td>provinceField</td> <td>'province'</td> <td>省份(省级)字段名</td> </tr> <tr> <td>cityField</td> <td>'city'</td> <td>城市(地级)字段名</td> </tr> <tr> <td>areaField</td> <td>'area'</td> <td>地区(县区级)字段名</td> </tr> <tr> <td>valueType</td> <td>'code'</td> <td>下拉框值的类型,code行政区划代码,name地名</td> </tr> <tr> <td>code</td> <td>0</td> <td>地区编码</td> </tr> <tr> <td>province</td> <td>[无]</td> <td>省份(省级),可以为地区编码或者名称</td> </tr> <tr> <td>city</td> <td>[无]</td> <td>城市(地级),可以为地区编码或者名称</td> </tr> <tr> <td>area</td> <td>[无]</td> <td>地区(县区级),可以为地区编码或者名称</td> </tr> <tr> <td>required</td> <td>true</td> <td>是否必须选中(是否自动选择地区)</td> </tr> <tr> <td>nodata</td> <td>'hidden'</td> <td>当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理</td> </tr> <tr> <td>onChange</td> <td>[无]</td> <td>地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码</td> </tr> </tbody> </table> <h2>callback(api)参数</h2> <table> <thead> <tr> <th width="200">方法</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>getInfo(data)</td> <td>获取当前选中的地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码</td> </tr> </tbody> </table> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p> </div> </body> </html>
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论