需引入三个文件，文件底部有附件下载

1，html代码

<div id="main">
		<h2>jQuery省市区三级联动</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":"HTML5"},{"n":"CSS3","a":[{"s":"HTML"},{"s":"AJAX"}]},{"n":"JSON"}]},
		{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Python"},{"n":"PHP"},{"n":"JAVA"}]},
		{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"Mssql"}]},
	]},
	prov:"",
	city:"",
	dist:"",
	nodata:"none"
});
</pre>
		</div>
	</div>

2，js代码

<script type="text/javascript" src="__PUBLIC__/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/provinces/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" : "HTML5"
						}, {
							"n" : "CSS3",
							"a" : [ {
								"s" : "HTML"
							}, {
								"s" : "AJAX"
							} ]
						}, {
							"n" : "JSON"
						} ]
					}, {
						"p" : "编程语言",
						"c" : [ {
							"n" : "C"
						}, {
							"n" : "C++"
						}, {
							"n" : "Python"
						}, {
							"n" : "PHP"
						}, {
							"n" : "JAVA"
						} ]
					}, {
						"p" : "数据库",
						"c" : [ {
							"n" : "Mysql"
						}, {
							"n" : "SqlServer"
						}, {
							"n" : "Oracle"
						}, {
							"n" : "Mssql"
						} ]
					}, ]
				},
				prov : "",
				city : "",
				dist : "",
				nodata : "none"
			});
		});
</script>

3，修改jquery.cityselect.js 地区包引入路径

 settings = $.extend({
            url: "Public/provinces/city.min.js",//引入路径
            prov: null,
            city: null,
            dist: null,
            nodata: null,
            required: true
        }, settings);

js文件.zip