在处理网站的时候，需要用到省市二级联动的功能。你选择你所在是省份，然后自动跳出这个省份的市区，方便用户也便于对数据进行管理。

对于这样的需求，很直观的想法就是利用ajax从数据库调用数据进行处理。当然前提是把这些省市的数据录入数据库里面。然后利用ajaxj进行处理。这样做的好处在于数据的增减很容易通过数据库操作完成，而且样式方面的处理也是很方便就能搞定！

但是不好的就在于这样需要额外滴将数据录入数据库，而且还需要查库的操作，并不是很好。

这里提供两种方式，全部不用存数数据库的方式，而是采用javascript的方式进行处理。

效果如下：

使用起来非常方便！

代码如下：

首先引入jquery以及城市和省份的json文件，然后添加下面的代码即可（具体文件引用位置请自行修改）

<select id="province">
	<option>请选择省份</option>
</select>
<select id="city">
	<option>请选择城市</option>

</select>
<script type="text/javascript">
	jQuery(document).ready(function(){
		//加载省信息
		jQuery.post(
		"json/json-array-of-province.json",
		function(data_p){
			for(var i=0;i<data_p.province.length;i++){
				jQuery("#province").append('<option value='+data_p.province[i].code+'>'+data_p.province[i].name+'</option>');
			}
		},
		"json"
		);
		//当省改变的时候加载城市信息
		jQuery("#province").change(function(){
			jQuery("#city").html("");
			jQuery.post(
			"json/json-array-of-city.json",
			function(data_c){
				for(var j=0;j<data_c.city.length;j++){
					var provinceNum = jQuery("#province").val();
					if (provinceNum.substring(0, 2) == data_c.city[j].code.substring(0, 2)){
						jQuery("#city").append('<option value='+data_c.city[j].code+'>'+data_c.city[j].name+'</option>');
					}

				}
			},
			"json"
			);
		});
	}
	);
</script>
代码下载，点击这里下载。
另外一种效果跟这个类似，但是不是采用json方式，而是采用更直观点数组处理的，页面代码可以在这里下载查看。【原文地址http://codeyun.com/javascript/145.html】