<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="ajax,jquery,省市联动" /> <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> <title>基于jQuery+JSON的省市联动效果</title> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <style type="text/css"> .demo{width:80%; margin:20px auto} .demo h3{height:32px; line-height:32px} .demo p{line-height:24px} pre{margin-top:10px; padding:6px; background:#f7f7f7} </style> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.cityselect.js"></script> <script type="text/javascript"> $(function(){ $("#city_1").citySelect({ nodata:"none", required:false }); $("#city_2").citySelect({ prov:"北京", nodata:"none" }); $("#city_3").citySelect({ prov:"湖南", city:"长沙" }); $("#city_4").citySelect({ prov:"湖南", city:"长沙", dist:"岳麓区", nodata:"none" }); $("#city_5").citySelect({ url:{"citylist":[ {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]}, {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]}, {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]}, ]}, prov:"", city:"", dist:"", nodata:"none" }); }); </script> </head> <body> <div id="header"> <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div> </div> <div id="main"> <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-188.html">基于jQuery+JSON的省市联动效果</a></h2> <div class="demo"> <h3>直接调用</h3> <p>二级联动，默认选项为：请选择</p> <div id="city_1"> <select class="prov"></select> <select class="city" disabled="disabled"></select> </div> <p>三级联动，默认省份：北京，隐藏无数据的子级select</p> <div id="city_2"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select> </div> <pre> $("#city_1").citySelect({nodata:"none",required:false}); $("#city_2").citySelect({prov:"北京",nodata:"none"}); </pre> </div> <div class="demo"> <h3>设置省份、城市、地区（县）的默认值</h3> <p>二级联动</p> <div id="city_3"> <select class="prov"></select> <select class="city" disabled="disabled"></select> </div> <p>三级联动</p> <div id="city_4"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select> </div> <pre> $("#city_3").citySelect({prov:"湖南", city:"长沙"}); $("#city_4").citySelect({prov:"湖南", city:"长沙", dist:"岳麓区"}); </pre> </div> <div class="demo"> <h3>自定义下拉选项</h3> <div id="city_5"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select> </div> <pre> $("#city_5").citySelect({ url:{"citylist":[ {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]}, {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]}, {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]}, ]}, prov:"", city:"", dist:"", nodata:"none" }); </pre> </div> <br /> <br /> </div> <div id="footer"> <p>Powered by helloweba.com 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p> </div> <p id="stat"><script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script></p> </body> </html>
本文转载自helloweba
下载源码：cityselect.zip